In this post we are going to go over the
ngFor core directive, namely we are going to go over the following:
ngFordoes and what is its syntax
- What are the most common errors associated to
- Variable visibility
- Finding the index position of an element
- How to stripe a table using
- Identifying the
lastelement of a list
- How does
ngFortrack items, why it can be important for performance ?
- How to use
- When to use
- Learn why
ngForis not only for arrays
- A quick question for you at the end about learning
So let's get started diving into
ngFor ! Below you can also find a video version of this post if you prefer, and the running code of this post is available here.
What can we do with
The core directive
ngFor allows us to build data presentation lists and tables in our HTML templates. Let's take for example the following data:
ngFor we can print this data to the screen under the form of a data table, by generating HTML similar to this:
What is the syntax of
ngFor, let's create a component so that we can have a working HTML template:
This template will generate the HTML table that we showed just above. We can see in this example the (most common) syntax for using
- we are passing to
ngForan iteration expression
- a loop variable named
herois defined using the keyword
- the expression is under the form of
Note that the loop variable
hero is only visible inside the loop, you would not be able to access it outside the
ngFor Errors to watch out for
If you have an AngularJs background, you will see this error a few times before you get used to the new Angular 2 syntax:
Can't bind to 'ngFor' since it isn't a known property of 'tr'
This is because you have accidentally either used
item in items instead of
item of items, or forgot to add the
let keyword at the beginning of the expression:
Finding the index of a list element
A very common requirement is to add to a list the numeric index position of its element. We can get the index of the current element by using the
Note that you need the let keyword to get the value of the index, otherwise you will get an error similar to this one:
Parser Error: Unexpected token = at column ...
With this change, the HTML generated now looks like the following:
How to stripe a table using
Another very common functionality needed when building tables is to be able to stripe a table by adding a different css class to the even or odd rows.
Let's say that to the above table we want to add a CSS class
even if the row is even and the CSS class
odd if the row is odd.
In order to so, we have a couple of variables available for that:
odd, that can be used in the following way together with
Let's have a look at the HTML generated by this template:
As we can see,
ngClass added the CSS classes to the right rows, as we would expect.
first and the
last element of a list
Just like the even and odd functionality, there are also two other variables that can be used to identify the first and the last elements of the list:
This will add a CSS class named
first to the first element of the list, and a CSS class named
last to the last element of the list:
ngFor work when we add or remove elements from the list ?
As the input list gets modified,
ngFor will try to avoid to constantly create and destroy the DOM elements of the list, as this is an expensive operation. Also, when we pass to
ngFor a new list, this does not mean that the whole list will be re-built, meaning all the DOM re-created.
Many of the existing DOM elements will be reused and only some values inside them will be overwritten, and the decision is taken for each element in the list separately.
In order to take that decision Angular needs to identify each list element in an unique way, because for example if we pass in a new list with a different order, Angular will try to identify the elements and re-order the DOM elements of the list without deleting them and re-creating them.
How are list items tracked by default ?
ngFor by default tracks list items using object identity. This means that if you build a list of new objects from scratch with the exact same values as the previous list and pass this newly built list to
ngFor, Angular will not be able to tell that a given list item is already present or not.
From a point of view of object identity the new list contains a whole new set of items, completely different from the previous set. This is the case if for example we query the data again from the backend.
Tracking by object identity is a good default strategy because Angular has no information about the object so it cannot tell which property it should use for tracking.
Why can this be important for performance ?
As we see,
ngFor already does a lot of optimizations out-of-the-box to try to reuse existing DOM elements as much as possible, but its doing so based on object identity.
In the case of templates with large lists, or lists that occupy a large part of the screen, we might even with those optimizations still run into performance issues and notice that the UI is slow due to the large amount of DOM elements being created and destroyed.
If that happens to be the case, we can configure
ngFor to do the tracking by something else other than object identity.
How to use
We can provide our own mechanism for tracking items in a list by using
trackBy. We need to pass a function to
trackBy, and the function takes a couple of arguments, which are an index and the current item:
This implementation would do the tracking based on the
When to use
The use of
trackBy its a performance optimization and is usually not needed by default, its in principle only needed if running into performance issues.
Let's say that you are shipping to ancient mobile browsers or ancient versions of IE: you might want to consider applying
trackBy as a precaution in your larger tables, but it really depends on your system and the use case.
ngFor is not only For Arrays?
In this example we have been passing to
ngFor in order for it to work.
We can now use this configuration element in our template in the following way:
Now let's query this data from the configuration elements using
Do you see what happened here ? Turns out the
QueryList is a class that is part of Angular and is itself an Iterable! So although we can use it programmatically in the component class, we can also pass it directly to
ngFor and iterate over it directly.
And the same could be done with any other Iterable in our program.
Learn ngFor via a Video Tutorial
Please have a look also at the question just below, most of what we went over in this post can also be found in this YouTube video, subscribe to our channel to get more videos like this in your YouTube home screen:
This video is part of the Free Angular 2 For Beginners Course, have a look at it its over 2h and no credit card is needed for watching it, there are also more free lessons in my site other than the beginners course.
Other posts on Angular 2
If you enjoyed this post, please have also a look at other popular posts on my blog that you might find interesting:
- Angular 2 Router - How To Build a Navigation Menu with Bootstrap 4 and Nested Routes
- Angular 2 Router - Extended Guided Tour, Avoid Common Pitfalls
- Angular 2 Components - The Fundamentals
- How to build Angular 2 apps using Observable Data Services - Pitfalls to avoid
- Introduction to Angular 2 Forms - Template Driven vs Model Driven
- Angular Universal In Practice - How to build SEO Friendly Single Page Apps with Angular 2
- How does Angular 2 Change Detection Really Work ?
Free Lessons Available on YouTube
Have a look at the Angular University Youtube channel, we publish about 25% to a third of our video tutorials there, new videos being published all the time.
Subscribe to get new video tutorials: