HTML code appearing as string

Question

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!

See stackoverflow.com/questions/39959273/…, stackoverflow.com/questions/39961645/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Oct 10, 2016 at 17:22
The inserted HTML is a string, with "<table>...'stuff'...</table" — MariusJ
– MariusJ, Commented Oct 10, 2016 at 17:39

peng37 · Accepted Answer · 2016-10-12 08:57:36Z

1

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;
}

edited Oct 12, 2016 at 8:57

answered Oct 10, 2016 at 18:48

peng37

4,5501 gold badge14 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

MariusJ Over a year ago

I have tried, it did not work. I use a function to create the table cells, outputted as a string. So putting it inside {{ }} would only print the string, not running it as html code.

peng37 Over a year ago

What i mean is, don't create html string(the table cells) in a function, just put all the html structure in the template, like: <table><tr><td>{{cellInfo}}</td><tr><table>, and only create the cellInfo property with functions

MariusJ Over a year ago

I can't, because I have functions to determine how many cells the table should have, not only putting a content in them.

peng37 Over a year ago

What about *ngFor? It will render the cells you give to it dynamically, no matter how many.

MariusJ Over a year ago

You mean like <p *ngFor="let calendar of function()">{{calendar}}</p>? It doesn't show the table.

|

Collectives™ on Stack Overflow

HTML code appearing as string

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related