ng-repeat in angular 2

Question

Need to display a text area for displaying the details, once the details button is clicked.

It gives an output similar to this table structure

      <table>
        <th>ID</th>
        <th>Title</th>
        <tr *ngFor = "let row of indexes">
        <td *ngFor = "let id of row>{{id}}</td>
        <td><button (click)="showDetails()">DETAILS</td>
       </tr>
       </table>

<tr *ngIf="isClicked"><td>{{id.details}}</td></tr> ---> This needs to be displayed very next to the row where the button is clicked.

In angular 1.x we can achieve this using ng-repeat-start/ng-repeat-end. In angular 2 I have an clue of including </template ngFor let-row [ngForOf]="indexes"> But not sure where to include this. Please suggest.

Answer 1

If i understand your problem correctly, you want to insert two table-rows for each of your indexes .

So if you have something like this in your component class:

rows: any[] = [
    { detailsVisible: false },
    { detailsVisible: false },
    { detailsVisible: false },
    { detailsVisible: false },
    { detailsVisible: false }
];

toggleDetails(row: any) {
    row.detailsVisible = !row.detailsVisible;
}

You can do it by using ng-container :

<table>

    <ng-container *ngFor="let row of rows">
        <tr>
            <td (click)="toggleDetails(row)">show details</td>
        </tr>

        <tr *ngIf="row.detailsVisible">
            <td>only visible after click on details cell</td>
        </tr>
    </ng-container>

</table>

Hope this helps.