The ngFor Directive

Learn how to loop through elements with the ngFor directive.

We'll cover the following

We’re able to use the post component to render the same template with different content. As it stands, if we added more objects to the posts array, we’d have to update the template. It would be nice if the template could output the correct number of posts without having to update it as often.

We can make this cleaner using a structural directive called ngFor. This directive will allow us to loop through an array in the template. The element it’s applied to will be output on each iteration.

In the app.component.html file, we can update the template to the following:

Get hands-on with 1200+ tech skills courses.