NgFor 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.
This post covers Angular 2 and up
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>
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>
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Alligator.io is a developer-focused resource that offers tutorials and insights on a wide range of modern front-end technologies, including Angular 2+, Vue.js, React, TypeScript, Ionic, and JavaScript.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
Full documentation for every DigitalOcean product.
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.
New accounts only. By submitting your email you agree to our Privacy Policy
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.