The ngFor Directive

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: