Angular - Display a list of items with ngFor
Other versions available:
- React: React
- Vue: Vue 3, Vue 2
- ASP.NET Core: Blazor WebAssembly
This is a quick example to show how to display a list of items in Angular with the ngFor directive.
The example simply renders an array of users as rows in a table with <tr *ngFor="let user of users">.
Here it is in action: (See on StackBlitz at https://stackblitz.com/edit/angular-ngfor-display-items-example)
Example Angular Template with ngFor Directive
The app component template contains some standard html for a heading and table, and inside the table the tr tag uses the *ngFor Angular directive to loop over the users array and render a table row for each user that includes the user name, email and role.
<h3 class="p-3 text-center">Angular - Display a list of items with ngFor</h3>
<div class="container">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{user.firstName}} {{user.lastName}}</td>
<td>{{user.email}}</td>
<td>{{user.role}}</td>
</tr>
</tbody>
</table>
</div>
Example Angular Component with Users Array
The angular app component contains the hardcoded users array that is rendered with the ngFor directive in the above template. The component is bound to the template with the templateUrl parameter of the @Component decorator.
import { Component } from '@angular/core';
@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent {
users = [
{ firstName: 'Frank', lastName: 'Murphy', email: '[email protected]', role: 'User' },
{ firstName: 'Vic', lastName: 'Reynolds', email: '[email protected]', role: 'Admin' },
{ firstName: 'Gina', lastName: 'Jabowski', email: '[email protected]', role: 'Admin' },
{ firstName: 'Jessi', lastName: 'Glaser', email: '[email protected]', role: 'User' },
{ firstName: 'Jay', lastName: 'Bilzerian', email: '[email protected]', role: 'User' }
];
}
Angular ngFor Local Variables - index, first, last, even, odd
It's also possible to set local variables with the ngFor directive to access the index of the current item, to know if it is the first or last item, and to know if is an even or odd item.
This is how to set all local variables with ngFor:
<tr *ngFor="let user of users; let i = index; let first = first; let last = last; let even = even; let odd = odd">
...
</tr>
Subscribe or Follow Me For Updates
Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.
- Follow me on Twitter at https://twitter.com/jason_watmore
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
Other than coding...
I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some Angular Help?
Search fiverr to find help quickly from experienced Angular developers.
Support my work
