Angular - 2.28 Get the index when using ngFor

In the last video, we created a solution with our log where we could add items that receive a growing number. This number then determines whether we have a blue background color or a white text CSS class.

In the assignment, I proposed two options to replace the use of a ascending number in our log. The first option would be to use a different content such as a time stamp or any other text. The second option would be to extract the index from ngFor to replace the current verification based on the ascending number.

In order to implement the first option, I modified my app component.ts file using the timestamp obtained with "new date". " Date" is an object integrated in JavaScript and therefore does not require import. Now we can push new timestamps on our table by running "ng serve" and simply clicking the button.

However, everything is currently in blue because our check always returns "true" since the string is considered to be greater than 5. To solve this, we can also add something to "ngFor". By separating by a semicolon, we can extract additional information such as the current index or the current iteration index. With "let", we can link it to any variable name of our choice, such as "i" or "index". Using "= index", we can access the current iteration index.

With this information, we can update our solution by replacing the current verification based on the ascending number with a verification based on the index extracted from ngFor. This allows us to work with any content and not just increasing numbers.

In summary, we now have solid knowledge about the basics of creating a solution and can use it to set up our course project in the next section before delving deeper into the components and data link.