Ng-repeat-start in angular2 - aka repeat multiple elements using NgFor

Question

I need to repeat several li-elements in a list in Angular2 for each item. In angular 1.x I used ng-repeat-start and ng-repeat-end for this. I can't find the right way to do it in Angular 2. There are some older blog posts about this, but their suggestions don't work in the newest beta of Angular2.

All <li>-elements should be repeated for each category: (which I would normally do with the attribute *ngFor="#category of categories" - but I can't find where to put it...

Help?

<ul class="dropdown-menu" role="menu">
    <li class="dropdown-header">
        {{ category.title }}
    </li>
    <li>
        <a href="{{ '/music/' + tag.keyword }}" *ngFor="#tag of category.tags" [hidden]="tag.deleted === 1">{{ tag.tag_title_da }}</a>
    </li>
    <li class="divider"></li>

    <li class="dropdown-header">Alle musikstykker</li>
    <li><a href="/music/all">Alle musikstykker</a></li>
</ul>

Answer 1

If you want to repeat the contents, use the template tag, and remove the * prefix on ngFor.

According to Victor Savkin on ngFor and templates:

Angular treats template elements in a special way. They are used to create views, chunks of DOM you can dynamically manipulate. The * syntax is a shortcut that lets you avoid writing the whole element.

<ul class="dropdown-menu" role="menu">    <template ngFor #category [ngForOf]="categories">     <li class="dropdown-header">         {{ category.title }}     </li>     <li>         <a href="{{ '/music/' + tag.keyword }}" *ngFor="#tag of category.tags" [hidden]="tag.deleted === 1">{{ tag.tag_title_da }}</a>     </li>     <li class="divider"></li>      <li class="dropdown-header">Alle musikstykker</li>     <li><a href="/music/all">Alle musikstykker</a></li>     </template> </ul> 

Update angular ^2.0.0

You can use ng-container and just change #var to let var.

<ng-container> behaves the same as the <template> but allows to use the more common syntax.

<ul class="dropdown-menu" role="menu">   <ng-container *ngFor="let category of categories">     <li class="dropdown-header">       {{ category.title }}     </li>     <li>       <a href="{{ '/music/' + tag.keyword }}" *ngFor="let tag of category.tags" [hidden]="tag.deleted === 1">{{ tag.tag_title_da }}</a>     </li>     <li class="divider"></li>      <li class="dropdown-header">Alle musikstykker</li>     <li><a href="/music/all">Alle musikstykker</a></li>   </ng-container> </ul> 

Answer 2

In the newer versions it works like this:

<ul class="dropdown-menu" role="menu">
  <template ngFor let-category [ngForOf]="categories">
    <li class="dropdown-header">
        {{ category.title }}
    </li>
    <li>
        <a href="{{ '/music/' + tag.keyword }}" *ngFor="#tag of category.tags" [hidden]="tag.deleted === 1">{{ tag.tag_title_da }}</a>
    </li>
    <li class="divider"></li>

    <li class="dropdown-header">Alle musikstykker</li>
    <li><a href="/music/all">Alle musikstykker</a></li>
  </template>
</ul>

--> let-category instead of #category