57. Outputting a List of Recipes with ngFor

Jul 14, 2026 04:29 · 4:37 · English · Whisper Turbo · 2 Лектори

Този запис изтича днес. Подновяване за постоянно съхранение →

Индекс на лекция

0:02

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So were you successful using our recipes array here and

0:06

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

replicating this part in the code as often as needed and fill it

0:10

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

with the data for the recipe.

0:12

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

Now clearly we need ng4 for this.

0:16

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So let's add ng4.

0:18

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

This is the directive which allows us to repeat code in

0:22

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

our template.

0:23

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

And here I want to loop through all the recipes.

0:27

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So I will actually create a local variable named recipe.

0:31

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

This name is totally up to you.

0:32

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

That will simply store the recipe of each iteration in

0:36

S… Speaker 1 (57. Outputting a List of Recipes with ngFor)

our loop.

0:37

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

And I will loop through all the recipes.

0:39

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So through this recipes property we created here in the

0:44

S… Speaker 1 (57. Outputting a List of Recipes with ngFor)

TypeScript file.

0:45

S… Speaker 1 (57. Outputting a List of Recipes with ngFor)

Now with that,

0:46

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

I'll also bring this into new lines here to make it a bit easier

0:50

S… Speaker 1 (57. Outputting a List of Recipes with ngFor)

to read.

0:51

S… Speaker 1 (57. Outputting a List of Recipes with ngFor)

With that,

0:52

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

everywhere inside this ng4 loop,

0:56

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

so everywhere here,

0:57

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

we can use this recipe now.

0:59

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So let's use it to output the name.

1:02

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

We can use string interpolation for that.

1:04

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

String interpolation,

1:06

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

as you learned, allows us to output some text anywhere in our template.

1:09

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

Now we got this single recipe.

1:12

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

But that's going to be an object looking like our model.

1:15

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

Because remember,

1:16

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

the recipes array simply holds an array of our recipes.

1:20

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So a single item simply looks like this.

1:23

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

It has a name,

1:24

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

a description and the image path.

1:26

S… Speaker 1 (57. Outputting a List of Recipes with ngFor)

Well,

1:27

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

with this information,

1:28

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

we can of course access the name here like this.

1:32

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

And for the description,

1:33

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

we can replace this with recipe description.

1:36

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So we're going to use the property names we set up here in the model.

1:40

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

And important,

1:41

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

you have to use the ones here at the top,

1:43

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

of course, because down there,

1:44

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

these are only the constructor argument names.

1:47

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

They are not available outside of this model.

1:50

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So that's the name and description.

1:53

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

Now about that image.

1:56

S… Speaker 1 (57. Outputting a List of Recipes with ngFor)

First of all,

1:57

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

for that alt text here,

1:59

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

that's a normal HTML attribute,

2:01

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

of course, I will use string interpolation to output some text here,

2:05

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

the recipe name maybe.

2:06

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

But regarding the image source itself,

2:10

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

and I'm just splitting this over multiple lines to make it a bit easier to read.

2:14

S… Speaker 1 (57. Outputting a List of Recipes with ngFor)

Regarding that source,

2:16

S… Speaker 1 (57. Outputting a List of Recipes with ngFor)

we can follow two approaches.

2:19

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

You can either use string interpolation here to

2:23

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

output recipe image path here,

2:26

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

and that should work fine,

2:27

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

or as an alternative,

2:30

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

You cannot use the attribute plus string interpolation,

2:34

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

but you could bind to the source property

2:38

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

itself.

2:39

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

And now here you don't add curly braces,

2:42

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

instead just recipe image path because now

2:46

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

we're using property binding and not string interpolation anymore.

2:49

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So here is a great example of where you may use both.

2:53

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

String interpolation with the normal HTML attribute

2:58

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

or not using the attribute,

3:00

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

but directly binding to the source property of the image,

3:03

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

and then just putting in a valid expression returning what this property

3:07

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

expects, in this case a string,

3:09

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

between the quotation marks.

3:10

S… Speaker 1 (57. Outputting a List of Recipes with ngFor)

Now,

3:12

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

I will go with the property binding approach here,

3:14

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

and since I can't comment this out in here without breaking the element,

3:18

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

I'm going to remove it,

3:19

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

but I want you to keep in mind that both approaches would work.

3:22

S… Speaker 1 (57. Outputting a List of Recipes with ngFor)

With that,

3:24

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

let's save and see if we see something.

3:27

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

And actually,

3:28

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

that looks pretty good,

3:29

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

but looks like the image I chose does not support deep linking.

3:34

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So that's nice.

3:36

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

Probably good for them.

3:37

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

Let me quickly pick a different image then.

3:40

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So I ended up with picking this image here then.

3:43

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So you can see it here.

3:46

S… Speaker 1 (57. Outputting a List of Recipes with ngFor)

And now we get the list working.

3:48

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

This is the style I want to have.

3:49

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

Of course, it doesn't do anything if I click it,

3:51

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

but that's something we can add in the future.

3:53

S… Speaker 1 (57. Outputting a List of Recipes with ngFor)

For now,

3:54

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

the recipe list component is taking shape.

3:58

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

I want to add one more thing,

4:00

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

though. I don't want to have this button sitting directly on top of this

4:04

S… Speaker 1 (57. Outputting a List of Recipes with ngFor)

list.

4:05

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So what I'll quickly do in my recipe list component here,

4:07

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

between the button and the list,

4:10

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

I can simply add a horizontal line to have a little bit of

4:14

S… Speaker 1 (57. Outputting a List of Recipes with ngFor)

a, well,

4:15

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

spacing in between and this nice separation.

4:18

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So that's the list.

4:19

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

And you should see that if you add more items to that list,

4:23

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

that it automatically grows.

4:25

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So if I simply duplicate this because I'm lazy,

4:27

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

you should see the same recipe twice here.

4:30

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

So that's working great.

4:32

S… Speaker 2 (57. Outputting a List of Recipes with ngFor)

Now let's work on the details section next.

Този транскрипт е генериран от AI (автоматско разпознаване на речта). Може да съдържа грешки — проверка срещу оригиналния аудио за критична употреба. Политика на МА

❤️ Харесвате ли STT.ai? Кажете на приятелите си!

Резюме

Щракнете Съвкупно, за да генерирате AI резюме на този транскрипт.

Попитайте интелигентния интелект за този текст

Попитайте нещо за този транскрипт – АИ ще намери съответни раздели и отговор.

"Транкрипирай още един"