Angular2 nested ngFor

angular angular2-template
Okneloper picture Okneloper · Feb 6, 2016 · Viewed 53.6k times · Source

I need to do an equivalent of this in Angular2:

<?php
foreach ($somethings as $something) {
    foreach ($something->children as $child) {
        echo '<tr>...</tr>';
    }
}

Can this be achieved with ngFor and not adding new elements between <table> and <tr>?

Answer

TGH picture TGH · Feb 6, 2016

I have a sample that might be similar to what you want:

<table id="spreadsheet">
    <tr *ngFor="let row of visibleRows">
        <td class="row-number-column">{{row.rowIndex}}</td>
        <td *ngFor="let col of row.columns">
            <input  data-id="{{col.rowIndex}}-{{col.columnIndex}}" [value]="col.cellValue" (input)="col.cellValue = $event.target.value" (click)="model.selectColumn(col)" (keyup)="navigate($event)" />
        </td>
    </tr>
</table>

I use this to render out a spreadsheet looking grid as seen here: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

Related questions

Angular HTML binding

I am writing an Angular application and I have an HTML response I want to display. How do I do that? If I simply use the binding syntax {{myVal}} it encodes all HTML characters (of course). I need somehow to …

Read More
OrderBy pipe issue

I'm not able to translate this code from Angualr 1 to Angular 2: ng-repeat="todo in todos | orderBy: 'completed'" This is what i've done following the Thierry Templier's answer: Component template: *ngFor="#todo of todos | sort" Component code: @Component({ selector: 'my-app', templateUrl: "./…

Read More
Angular2 disable button

I know that in angular2 I can disable a button with the [disable] attribute, for example: <button [disabled]="!isValid" (click)="onConfirm()">Confirm</button> but can I do it using [ngClass] or [ngStyle] ? Like so: <button […

Read More