Published:

Angular - Display a list of items with ngFor

Other versions available:

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 or GitHub to be notified when I post new content.

 


Supported by