NgFor Directive in Angular - Hello friend inabnomaniiyaha, In the article that you read this time with the title NgFor Directive in Angular, we have prepared this article well for you to read and take information in it. hopefully the contents of the post Artikel Angular,what we write you can understand. Alright, happy reading.

Judul : NgFor Directive in Angular
link : NgFor Directive in Angular

NgFor Directive in Angular

 *ngFor Directive in Angular

NgFor in Angular is a built-in template directive that makes it easy to iterate over something like an array or an object and create a template for each item.

Here’s a basic example of its use:

<ul>

  <li *ngFor="let user of users">{{ user.name }}</li>

</ul>

This will output html that looks like this:

<ul>

  <li>Al Dente</li>

  <li>D. Liver</li>

  <li>Pepe Roni</li>

</ul>

let user creates a local variable that will be available in the template.

of users means that we’ll be iterating over the users iterable that should be made available in our component.

The * character before ngFor creates a parent template. It’s a shortcut to the following syntax: template=“ngFor let item of items”.

Available local variables

You can also set local variables for the following exported values: index, first, last, even and odd. index will return the current loop index, and the other values with provide a boolean indicating if the value is true or false. For example:

<ul>

  <li *ngFor="let user of users; let i = index; let odd = odd"

      [class.odd]="odd">

    {{i + 1}}. {{ user.name }}

  </li>

</ul>

Will produce the following markup:

<ul>

  <li>1. Al Dente</li>

  <li class="odd">2. D. Liver</li>

  <li>3. Pepe Roni</li>

</ul>

See Also

• *ngIf
• *ngSwitch

That's the articleNgFor Directive in Angular

That's it for the article NgFor Directive in Angular this time, hopefully can be useful for all of you. well, see you in another article post.

You are now reading the articleNgFor Directive in Angular with link addresshttps://inabnonapudyawanabing.blogspot.com/2020/10/ngfor-directive-in-angular.html

Tweet