Forward Advance Learning

Repeating with ng-for

NgFor is a directive that allows you to show a list of things. Say we have an array of cheese declared in out component:

this.cheeses = ['manchego', 'dolchelatte', 'fingers'];

We can render it like so:

<ul>
<li *ngFor='let cheese of cheeses'>
{{ cheese }}
</li>
</ul>

Template variable

We have a shorthand syntax for the template variable. We can also write:

The signals that the li should be used as a template. var cheese of cheeses signals that we should create a template variable* a value that exists only in the context of the template. This will contain each of the cheeses in order.

<ul>
<li *ngFor='#cheese of cheeses'>
{{ cheese }}
</li>
</ul>

Exercise - Output a list of cats

We are going to create a list of cats. In our component, make an array of cat objects, like this:

this.cats = [
{
name: "Hercule",
age: 4
},
{
name: "Claudette",
age: 9
}
]

Now iterate over the list, outputting the values.

Exercise - Generate Tabs from an Array

We are going to use an array to generate the tabs for our tab component.

First of all, generate an array containing the tabs that you would like to display. Add it to this.

Now pass that array in as a property to the tabs component.

Use an ngFor to iterate over the array and output each of the tabs in turn.