Creating multiple elements in an Angular2 loop

Question

Edit: About a possible answer: I also stumbled upon this question / answer and implemented it that way. However, the syntax is different with the new version of Angular2. The ngFor documentation has not been updated (this is where I looked). So I wrote the wrong code. The ngFor documentation has been updated in the Template Syntax - ngFor . Gunter wrote the right example of how to use it in newer versions of Angular2 (beta17 or higher).

I would like to create some elements in a loop. This is what I have now:

<table> <thead> <th>ID</th> <th>Name</th> </thead> <tbody> <tr *ngFor="let item of items" class="info"> <td>{{ item['id'] }}</td> <td>{{ item['name'] }}<td> </tr> </tbody> </table> 

What I need is under tr else tr with tr with details . The desired result should look like the one shown in the browser:

 <table> <thead> <th>ID</th> <th>Name</th> </thead> <tbody> <tr class="info"> <td>1</td> <td>Item 1<td> </tr> <tr class="details"> <!-- More detailed info about item 1 --> </tr> <tr class="info"> <td>2</td> <td>Item 2<td> </tr> <tr class="details"> <!-- More detailed info about item 2 --> </tr> </tbody> </table> 

How can I achieve the desired result?

Answer 1

<template ngFor [ngForOf]="items" let-item> is canonical for *ngFor and allows you to repeat several elements.

 import {Component} from '@angular/core' @Component({ selector: 'my-app', providers: [], template: ` <div> <h2>Hello {{name}}</h2> <table> <thead> <th>ID</th> <th>Name</th> </thead> <tbody> <template ngFor [ngForOf]="items" let-item> <tr class="info"> <td>{{ item['id'] }}</td> <td>{{ item['name'] }}<td> </tr> <tr class="details"> <td>{{ item['description'] }}<td> </tr> </template> </tbody> </table> </div> `, directives: [] }) export class App { items = [ {name: 'name1', id: 1, description: 'description1'} {name: 'name2', id: 2, description: 'description2'} {name: 'name3', id: 3, description: 'description3'} ]; constructor() { this.name = 'Angular2 (Release Candidate!)' } } 

Plunger example

Unlike Polymer (for example), using <template> inside <tbody> (or other elements of the table <tr>, ... ) also works fine in IE with Angular2 because Angular2 processes the template inside and never adds it to the DOM . In Polymer, this will not work because IE removes the “unexpected” tags from the table elements (which breaks Poymers <template is="dom-repeat"> ) See Also http://caniuse.com/#search=template

Answer 2

Use the following component code:

 import { Component } from '@angular/core'; @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', pipes: [] }) export class AppComponent { constructor() { this.items = [ {id: 1, name: 'Bob', details: 'Bob details'}, {id: 2, name: 'Sarah', details: 'Sarah details'}, {id: 3, name: 'Sam', details: 'Sam details'}, {id: 4, name: 'Susan', details: 'Susan details'} ]; } } 

With the following app.component.html file:

 <table> <thead> <th>ID</th> <th>Name</th> </thead> <tbody> <template ngFor [ngForOf]="items" let-item> <tr class="info"> <td>{{ item['id'] }}</td> <td>{{ item['name'] }}<td> </tr> <tr class="details"> <td colspan=2>{{ item['details'] }}</td> <!-- More detailed info about item --> </tr> </template> </tbody> </table> 

The result looks something like this:

 <table> <thead> <th>ID</th> <th>Name</th> </thead> <tbody> <tr class="info"> <td>1</td> <td>Bob</td><td> </td></tr> <tr class="details"> <td colspan="2">Bob details</td> </tr> <tr class="info"> <td>2</td> <td>Sarah</td><td> </td></tr> <tr class="details"> <td colspan="2">Sarah details</td> </tr> <tr class="info"> <td>3</td> <td>Sam</td><td> </td></tr> <tr class="details"> <td colspan="2">Sam details</td> </tr> <tr class="info"> <td>4</td> <td>Susan</td><td> </td></tr> <tr class="details"> <td colspan="2">Susan details</td> </tr> </tbody> </table> 

For more information read https://coryrylan.com/blog/angular-2-ng-for-syntax

Answer 3

This can be done by going to <tbody> instead of <tr> , since tables with mutiple tbody are valid in html, refer to .

So your code will look like

 <table> <thead> <th>ID</th> <th>Name</th> </thead> <tbody *ngFor="let item of items; #idx = index"> <tr class="info"> <td>{{idx}}</td> <td>Item {{idx}}<td> </tr> <tr class="details"> <td>{{ item['id'] }}</td> <td>{{ item['name'] }}<td> </tr> </tbody> </table> </table> 

Answer 4

Since the Angular v4 <template> deprecated. Use <ng-template> instead, as described in the tutorial: ng-template-element