CODEWITHSUNDEEP
htmlangulartypescript
MariusJ
MariusJ

Reputation: 305

HTML code appearing as string

Using Angular, I am calling a function inside a .html file, which returns a string containing a table element. I want this string to convert to html code.

I have tried [innerHtml]:

<p [innerHtml]="kalenderen(forsteUkedag('2016-08-01' | date:'E'), 8, 2016)"></p>

This works, printing the table, but the problem is that inside the table I have id/classes, unique for each cell, and I am not able to access them inside the .html file using this method. Styling the table from a CSS file is also not working. And I want to avoid inline CSS.

Any suggestions how to solve this so I can access the id/classes/objects? Thanks in advance!

Upvotes: 0

Views: 204

Answers (1)

peng37
peng37

Reputation: 4550

Maybe you don't need to insert html directly, what about this:

<p>
    <table id="yourId" class="yourClass">
        <tr>
            <td *ngFor="let cell of cells" 
                [attr.id]="cell.id">{{cell.text}}</td>
        </tr>
    </table>
</p>

Put all your html to the template, and component class only deals with data.

And in your component:

// Cell is like this:
// {id: string; text: string}
cells: Array<Cell[]>;
ngOnInit() {
    this.cells = this.getCells();
}
getCells() {
    let cells = .........;
    return cells;
}

Upvotes: 1

Related Questions