What is the equivalent of <template *ngFor in Angular 2?

Question

I want to do something like this:

<div *ngFor="let parent of parents">
    <div *ngFor="let child of parent.children">
    </div>
</div>

but I don't want that extra outer div. From what i've been able to find searching, in Angular 1 I could achieve this by doing this:

<template *ngFor="let parent of parents">
    <div *ngFor="let child of parent.children">
    </div>
</template>

This doesn't seem to work in Angular 2 though. What's the correct way to do this?

Answer 1

I think this should work for you:

<ng-template ngFor let-parent [ngForOf]="parents">
   <div *ngFor="let child of parent.children">
   </div>
</ng-template>

You can read more here:

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template

Also you can now use:

<ng-container *ngFor="let parent of parents">
   <div *ngFor="let child of parent.children">
   </div>
</ng-container>

The advantage here is that it has the same syntax as with a normal dom element.