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>

Solution 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>

Solution 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

Solution 3

Thanks for your effort, pixelbits, however the answer was different.

Reading about the asterisk in Template Syntax in the Angular.io guides gives you the clue.

This solved it:

<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>
</template> 

Solution 4

Worked with 5.2.x

<ng-template ngFor let-category [ngForOf]="categories">
  <label class="value-fields_label">{{ category.name }}</label>
  <h3 class="value-fields_value">{{ category.title }}</h3>
</ng-template>

View more solutions

Comments

[skovmand]

Yeah, but I need to repeat all five <li> for each category, and I can't put a <div> in to wrap them without destroying the list...

[skovmand]

The <li *ngFor="#tag of category.tags"> ... </li> you put in is another repeat inside the first repeat, that should work well.

[pixelbits]

If you put the parent ngFor on the <ul> tag, it will repeat the categories.

[skovmand]

For your edit: I don't want the <ul> to repeat. Only its contents

[Lodewijk Bogaards]

Maybe it should be: <template ngFor #category [ngForOf]="categories">

[Mark Rajcok]

Just FYI, the NgFor API doc also shows the <template ngFor #item [ngForOf]="items">...</template> syntax. Too bad they don't highlight the fact that this syntax must be used to repeat multiple elements.

[skovmand]

Thanks for that note

[user1879408]

Is this still working like that (2.0.0-rc.1)? I can't access the properties of category inside the loop.

[Dan Cancro]

Can you tell why this isn't working? plnkr.co/edit/0e796DfClochN9tmKrMO?p=preview

[Francisco Neto]

This syntax no longer works in angular 4.x.x, right guys? only let

[Liran H]

Works perfectly in Angular 4. Thank you!