What is ngFor in Angular Template syntax?
- Angular makes use of HTML for templates associated with components that eventually represent the views of your front-end application.
- A component controls the part of the user’s application UI and the associated template is what gets rendered in that part of the User Interface of an Application. The simple file structure of Angular makes it much simple to handle these kind of actions.
- The angular ngFor trackBy is used to improve the performance of an angular application. At the
- end of this blog, you will understand how to use ngFor trackBy and when to use the ngFor trackBy in your angular application.
- For HTML does not have any built-in template language, Angular extends HTML with a powerful template syntax that includes many directives such as ngFor is similar to for-loops in programming languages.
- The ngFor allows you to loop between an array of data directly in the HTML template. The array should be present in the connected component.
How to Use ngFor in Angular Templates?
Prerequisites
- Before creating the following application, we need the basic knowledge of angular and a few prerequisites as shown below:
- First of all, we need the basic knowledge of Angular and how does it work.
- Your computer must have Visual Studio Code installed and updated to the latest version.
- Your computer must have the Angular Command Line Interface installed to the latest version.
- Your computer must have the Node JS installed to the latest version.
Step 1: app.component.ts file
- Now we see how to use the ngFor directive by example.
- Now as you see below code, in the constructor of the app component class we initialize the student’s collection property with three students’ objects.
- In getStudent() method of app component class update the same student’s collection with five student objects.
- Here it is:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { student: any[]; constructor() { this.student = [ { ID: 'std101', FirstName: 'yas', LastName: 'shah', Branch: 'IT', DOB: '29/02/1998', Gender: 'Male' }, { ID: 'std102', FirstName: 'harsh', LastName: 'patel', Branch: 'ETC', DOB: '23/05/1999', Gender: 'Male' }, { ID: 'std103', FirstName: 'miar', LastName: 'shah', Branch: 'CSE', DOB: '24/07/1993', Gender: 'Female' }, ]; } getStudent(): void { this.student = [ { ID: 'std101', FirstName: 'yas', LastName: 'shah', Branch: 'IT', DOB: '29/02/1998', Gender: 'Male' }, { ID: 'std102', FirstName: 'harsh', LastName: 'patel', Branch: 'ETC', DOB: '23/05/1999', Gender: 'Male' }, { ID: 'std103', FirstName: 'mira', LastName: 'shah', Branch: 'CSE', DOB: '24/07/1993', Gender: 'Female' }, { ID: 'std104', FirstName: 'Hina', LastName: 'Sharma', Branch: 'ETC', DOB: '19/08/1990', Gender: 'Female' }, { ID: 'std105', FirstName: 'Sambit', LastName: 'Satapathy', Branch: 'CSE', DOB: '12/94/1991', Gender: 'Male' } ]; } } |
Step 2: app.component.scss file
- Now we add some style to our HTML page.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
table { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 20px; border-collapse: collapse; } td { border: 1.5px solid #369; padding:4px; } th{ border: 1.5px solid #369; padding:4px; } |
Step 3: app.module.ts file
- Now we add some modules in app.module.ts file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Step 4: app.component.html file
- Now we add our HTML code in the app.component.html file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<table> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Branch</th> <th>DOB</th> <th>Gender</th> </tr> </thead> <tbody> <tr *ngFor='let std of students'> <td>{{std.ID}}</td> <td>{{std.FirstName}}</td> <td>{{std.LastName}}</td> <td>{{std.Branch}}</td> <td>{{std.DOB}}</td> <td>{{std.Gender}}</td> </tr> </tbody> </table> <br /> <button (click)='getStudent()'>Refresh Students</button> |
- In the above code, we are not using the trackBy with ngFor directive.
- When your page loads for the first time you will see three students who initialize the constructor of the app component class and when you click on the refresh button, then you will see the fourth and fifth students in your table.
Why do we need to use ngFor trackBy in the angular application?
- The trackBy used to improve the performance of the angular project.
- It is usually not needed only when your application running into performance issues.
- The angular ngFor directive may perform poorly with large applications.
- A little change to the collection is adding a new item or removing an existing item from the collection may trigger a cascade of DOM manipulations.
- Assume, we have some data coming from some back-end API and we are storing data into some type of collection like an array and then we need to update these data over the webpage using ngFor directive.
- By default, what the angular framework will do is, it will remove all the DOM elements that are associated with the data and will create them again in the DOM tree even if the equal data is coming.
- A lot of DOM Manipulation will occur in the background if a large amount of data coming from the back-end API repeatedly.
The ngFor with TrackBy with example
- Angular gives the trackBy feature which allows you to track elements when they are added or removed from the array for performance reasons.
- We simply need to define a trackBy method, which needs to identify each element uniquely, in the associated component and assign it to the ngFor directives as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import { Component } from '@angular/core'; @Component({ selector: 'app-tasks-list', template: ` <ul> <li *ngFor="let task of tasksarr"> </li> </ul> ` }) export class MoviesListComponent { tasksarr: any[] = [ { "id":1, "title": "Working" }, { "id":2, "title": "Pending" }, { "id":3, "title": "Approving" }, { "id":4, "title": "typing" } ]; trackByMethod(index:number, el:any): number { return el.id; } } [tasks-list.component.ts] |
- We can simply identify each element in a unique way using its id.
Conclusion
In this article, we discussed the ngFor trackBy feature of the angular framework which is widely used incorporates to track elements when they are removed or added from the specific array for performance reasons. In other words, we can identify each element uniquely by its ID. We also discussed how to use it stepwise, the need for this feature, and an example of the same.
Load comments