Embeeded *ngFor in Angular4

Question

Hi i have a problem with embeeded *ngFor loop. I try to make make something like that.

<div *ngFor = let console of consoles>
...
...
<li *ngFor = let pad of console.pad>
{{pad}
</li>
...
...
</div>

I tryed to put [innerHtml] data binding and it works but i have to make that second ngFor working because it will work great with my css styling.

Thank you in advance.

PS. I'm using Angular4

Answer 1

Do you mean use innerHTML in the {{pad}} location? you may try this way if so:

<div *ngFor = let console of consoles>
    ...
    ...
    <li *ngFor = let pad of console.pad>
        <span [innerHTML] = {{pad}}></span>
    </li>
    ...
    ...
</div>