7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.8 The `*ngFor` Directive

The *ngFor directive is a repeater that allows us to duplicate a block of markup for each item in an array. This allows us to create dynamic, data-driven views.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


4.8 The `*ngFor` Directive

Hi folks. In this lesson, we're going to look at the ngFor structural directive. This directive is used to add repeated blocks of mark-up, based on some collection of items. So if we have a list of objects, we can display a chunk of mark-up for each item in the array. It's super useful and so very common. Our example application will have some lists of objects. Each player has a list of cards in their hand, so we can use ngFor to display the cards in the players' hands. Let's go to the game component. Inside the template there's a list element containing a single list item with the class card. We'll need one of these list items for each card in the player's hand. With the ngFor directive, we use the star syntax. The right-hand part of the directive is different than other template features in Angular. Unlike directives and bindings, the right-hand part is not a template expression. Instead, this is a special micro syntax that Angular interprets. We start by declaring a template variable using let, and then specifying the name of the variable, card in this case. We then use the keyword of, to specify the collection that we would like the loop to iterate. In this case, the hand property of the player. The ngFor directive can only be used with iterable properties, like arrays. It can't be used with objects. We also want to add some different class names, which we can do with some simple interpolation. We can add classes for the color of the card, the suit and either the name or value of the card. We can also update the span inside the list item. So that's the template handled, but we need to make some changes to the game components class as well. So first of all, we'll need to import the player model. We can also define the player property. So the player property will be of the type Player. We don't have anything in place yet to start a proper game. So let's just import the deck and create a player manually, so that we can see the ngFor working. So let's import the deck first of all. And now in the ngOnInit, let's create a new player and assign it to the player property. So one last thing we need to do, is have some extra styling for the cards. I've got a style sheet containing these styles on my desktop ready. So, I'm just gonna drag this into the SaaS folder. And let's just open that up and take a quick look. So the reason why I've already created this file and I'm just dragging it in is, because I'm sure nobody wants to sit there and watch me type out all of these styles. Cuz there really are a lot of them. So we've got the styles in place now. We should have a player, and that player should have some cards. So let's try and start the game and see what happens. So we can see that we don't see any cards at this point. Doesn't look like we've got any errors in the console. Let's just take a quick look through things, so the game component has a public property called player. I was just doing a cheeky console log and see that everything has been initialized properly. It does look like everything has been initialized correctly. Looks good to me. Okay, let's go back and check the template. And certainly looks like everything is in place. It looks like there is an arrow in the deck. Let's just see what's happening there. So it looks like I had an extra square bracket in there. Okay, so that should be fixed now. Let's go back and see if the browser is now working in the way that it should do. And the compiler seems happy now. And we still didn't see any cards. And the reason why we don't see any cards actually is because I've dragged the stylesheet in, but we just need to import that now into the main style sheet Let's try it again. And we have some cards. Excellent. So the ngFor will repeat a block of mock up for each item in an array. The array in this case, is the array of cards in the player's hand. And we know that there are two cards in the player's hand, so the block of mark up is been repeated twice. So let's also add the player's score now in the game component. We can do that with a simple interpolation binding. And let's go back to the browser again. Now we find that the score is displayed alongside the cards. We need to use an almost identical instance of the ngFor directive in the end component as well, so we might as we'll add that now. This time it's not gonna be the player property, it's gonna be the dealer property. And it's the same here, instead of letcardofplayer.hand, it's going to be letcardofdealer.hand. Aside from that it's identical, and we better add this dealer property in the end component class. So the dealer will just be a type of player. We haven't got the player model yet, so we'll need to bring that in as well. And now we're all set. So in this lesson, we've learned a little bit about the ngFor directive, and we saw that we can use it to create repeated blocks of mark-up, based on an iterable property of the component. We learned that we define a template variable which contains one of each from the iterable collection, and which we can use for the data of each repeated block of mark-up. Thanks for watching.

Back to the top