From the course: Angular Essential Training (2019)

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Structural directives: ngFor

Structural directives: ngFor - Angular Tutorial

From the course: Angular Essential Training (2019)

Start my 1-month free trial

Structural directives: ngFor

- [Instructor] Another common Angular built-in structural directive is ngFor. The ngFor directive is used to repeat markup when looping over some data. Let's put the ngFor to use in the app. We have another new component already added to the project for this lesson named media item list component and the app module and app component are already updated to use that. Let's take a look at the media-item-list.component.ts file. This component is designed to render out a list of media items and uses the media item component to render each one. The class has a property named media items that has some static sample data set to it, for now a couple of media items. Let's flip over to the HTML file for this component and make use of the ngFor structural directive. In the template markup there is a section element with one mw-media-item element inside of that. We want to have a mw-media-item element for each media item in the media…

Contents