#Even and odd numbers video how to
#Even and odd numbers video code

#Even and odd numbers video how to

With this change, the HTML generated now looks like the following: How to stripe a table using even and oddĪnother 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. 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. We can get the index of the current element by using the index variable: 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Ī very common requirement is to add to a list the numeric index position of its element. If you have an AngularJs background, you will see this error a few times before you get used to the new Angular syntax: Can't bind to 'ngFor' since it isn't a known property of 'tr' Note that the loop variable hero is only visible inside the loop, you would not be able to access it outside the ngFor section.

the expression is under the form of var i of items, which is consistent with the Javascript of iteration functionality.

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?

#Even and odd numbers video code

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: