
a loop variable named hero is defined using the keyword let, which is consistent with Javascript syntax. we are passing to ngFor an iteration expression. We can see in this example the (most common) syntax for using ngFor: This template will generate the HTML table that we showed just above. To use ngFor, let's create a component so that we can have a working HTML template: With 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 take for example the following data: The core directive ngFor allows us to build data presentation lists and tables in our HTML templates.
The ngFor features are also covered in this video, have a look: What can we do with ngFor? 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. A quick question for you at the end about learning.
How does ngFor track items, why it can be important for performance?. Identifying the first and the last element of a list.
How to stripe a table using even and odd. Finding the index position of an element. What are the most common errors associated to ngFor. In this post we are going to go over the ngFor core directive, namely we are going to go over the following: