Cory Rylan

My name is , Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.

Follow @coryrylan
Angular

Angular ngFor syntax

Cory Rylan

- 2 minutes

Updated

This article has been updated to the latest version Angular 17 and tested with Angular 16. The content is likely still applicable for all Angular 2 + versions.

The latest Angular has many new changes and improvements over Angular 1.x This post will cover the new ngFor syntax and a simple comparison of version 1 ng-repeat to the latest ngFor.

First we will take a look at a simple Angular 1.x repeater that displays the index of the repeated item and the item value.


<!-- Angular 1.x -->
<ul>
<li ng-repeat="item in items">
{{$index}} {{item}}
</li>
</ul>

Here is the new ngFor syntax.


<!-- Angular -->
<ul>
<li *ngFor="let item of items; let i = index">
{{i}} {{item}}
</li>
</ul>

The new syntax has a couple of things to note. The first is *ngFor. The * is a shorthand for using the new Angular template syntax with the template tag. This is also called a structural Directive. It is helpful to know that * is just a shorthand to explicitly defining the data bindings on a template tag. The template tag prevents the browser from reading or executing the code within it.


<!-- Angular longhand ngFor -->
<template ngFor let-item="$implicit" [ngForOf]="items" let-i="index">
{{i}} {{item}}
</template>

So below is the typical syntax for an Angular list.


<ul>
<li *ngFor="let item of items; let i = index">
{{i}} {{item}}
</li>
</ul>

Looking back at our ngFor the next interesting thing to note is let item of items;. The let key is part of the Angular template syntax. let creates a local variable that can be referenced anywhere in our template. So in our case we are creating a local variable let item.

The let i creates a template local variable to get the index of the array. If you do not need access to the index in your list the ngFor simply boils down to the following code.


<ul>
<li *ngFor="let item of items">
{{item}}
</li>
</ul>

One thing to note the camelCase syntax was introduced in Alpha 52. A new custom HTML parser was introduced that allowed camelCasing in templates to replace the kebab-case syntax.

Track By

Angular also includes the trackBy feature from Angular 1.x that allows performance improvements in our list rendering by tracking a unique identifier on our list items. The trackBy in newer versions of Angular is slightly different than Angular 1. To use track by you must pass a function as a parameter from your component.


<ul>
<li *ngFor=" let item of items; trackBy: trackByFn;">
{{item}}
</li>
</ul>
// Method in component class
trackByFn(index, item) {
return item.id;
}

The new angular syntax will allow Angular to work with native web components and gain the benefits of using Web Components. Angular will bring many exciting improvements over Angular 1 and will soon allow us to create even more scalable web applications.

View Demo Code   
Twitter Facebook LinkedIn Email
 

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts

Angular

Creating Dynamic Tables in Angular

Learn how to easily create HTML tables in Angular from dynamic data sources.

Read Article
Web Components

Reusable Component Patterns - Default Slots

Learn about how to use default slots in Web Components for a more flexible API design.

Read Article
Web Components

Reusable Component Anti-Patterns - Semantic Obfuscation

Learn about UI Component API design and one of the common anti-patterns, Semantic Obfuscation.

Read Article