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 (הכרה אוטומטית של דיבור). ייתכן שיש בו שגיאות אשר מאשרות את השמע המקורי לשימוש קריטי. מדיניות AI

❤️ אוהבים את STT.ai? ספרו לחברים שלכם!

תקציר

לחץ לסכם כדי ליצור סיכום AI של תעתיק זה.

שאל את אל על התעתיק הזה.

שאל כל דבר על התמליל הזה, הבינה המלאכותית תמצא חלקים רלוונטיים ותענה.

תמלול נוסף