61. Creating and Outputting the Shopping List

Jul 14, 2026 04:31 · 2:27 · English · Whisper Turbo · 2 Đầu ghi

Bản ghi chép này hết hạn hôm nay. Tăng cấp cho lưu trữ vĩnh viễn →

Tập tin

0:02

S… Speaker 1 (61. Creating and Outputting the Shopping List)

Let's use our newly created ingredient model.

0:04

S… Speaker 1 (61. Creating and Outputting the Shopping List)

So just like with recipe,

0:06

S… Speaker 1 (61. Creating and Outputting the Shopping List)

we can now define the type for our ingredients array.

0:09

S… Speaker 1 (61. Creating and Outputting the Shopping List)

And this will be of type,

0:10

S… Speaker 1 (61. Creating and Outputting the Shopping List)

well, ingredient array.

0:12

S… Speaker 1 (61. Creating and Outputting the Shopping List)

And of course,

0:13

S… Speaker 2 (61. Creating and Outputting the Shopping List)

for this,

0:14

S… Speaker 1 (61. Creating and Outputting the Shopping List)

we have to import ingredients.

0:16

S… Speaker 1 (61. Creating and Outputting the Shopping List)

So let's quickly do this from,

0:19

S… Speaker 1 (61. Creating and Outputting the Shopping List)

and now we have to move up one folder so that we are in the

0:23

S… Speaker 1 (61. Creating and Outputting the Shopping List)

app folder.

0:24

S… Speaker 1 (61. Creating and Outputting the Shopping List)

And then we have to go into the shared folder.

0:26

S… Speaker 1 (61. Creating and Outputting the Shopping List)

And there it's in the ingredient .model file without the file extension.

0:31

S… Speaker 2 (61. Creating and Outputting the Shopping List)

With that,

0:32

S… Speaker 1 (61. Creating and Outputting the Shopping List)

we can now create one first ingredient.

0:35

S… Speaker 1 (61. Creating and Outputting the Shopping List)

So let's use our ingredient constructor.

0:37

S… Speaker 1 (61. Creating and Outputting the Shopping List)

And we have to pass name and amount here.

0:41

S… Speaker 1 (61. Creating and Outputting the Shopping List)

So the name could be apples.

0:45

S… Speaker 1 (61. Creating and Outputting the Shopping List)

And we want five,

0:47

S… Speaker 2 (61. Creating and Outputting the Shopping List)

let's say.

0:47

S… Speaker 1 (61. Creating and Outputting the Shopping List)

And then let's also say we want to have some tomatoes,

0:51

S… Speaker 1 (61. Creating and Outputting the Shopping List)

maybe 10.

0:54

S… Speaker 1 (61. Creating and Outputting the Shopping List)

That is our shopping list for now.

0:59

S… Speaker 1 (61. Creating and Outputting the Shopping List)

Now we want to output it here in the component.

1:03

S… Speaker 1 (61. Creating and Outputting the Shopping List)

So we got an anchor tag here,

1:05

S… Speaker 1 (61. Creating and Outputting the Shopping List)

which represents a single item.

1:06

S… Speaker 1 (61. Creating and Outputting the Shopping List)

And now you could put this into its own component too.

1:10

S… Speaker 1 (61. Creating and Outputting the Shopping List)

But since this is going to be such a straightforward,

1:13

S… Speaker 1 (61. Creating and Outputting the Shopping List)

easy item,

1:14

S… Speaker 1 (61. Creating and Outputting the Shopping List)

I don't see much sense outsourcing it into its own component,

1:18

S… Speaker 1 (61. Creating and Outputting the Shopping List)

though it wouldn't necessarily be bad to do so.

1:21

S… Speaker 1 (61. Creating and Outputting the Shopping List)

But I also don't see a great advantage.

1:23

S… Speaker 1 (61. Creating and Outputting the Shopping List)

There also isn't a lot of business logic attached to this.

1:27

S… Speaker 1 (61. Creating and Outputting the Shopping List)

So I will place ng4 on this anchor tag.

1:30

S… Speaker 1 (61. Creating and Outputting the Shopping List)

to loop through all the ingredients so ingredient of ingredients and

1:36

S… Speaker 1 (61. Creating and Outputting the Shopping List)

now we can output the ingredient data here inside our

1:40

S… Speaker 1 (61. Creating and Outputting the Shopping List)

anchor tag so it makes sense to output the ingredient

1:45

S… Speaker 1 (61. Creating and Outputting the Shopping List)

name i believe

1:47

S… Speaker 1 (61. Creating and Outputting the Shopping List)

And then maybe in parentheses thereafter,

1:49

S… Speaker 1 (61. Creating and Outputting the Shopping List)

and these parentheses here are no angular syntax,

1:53

S… Speaker 1 (61. Creating and Outputting the Shopping List)

that is normal text here I'm outputting.

1:55

S… Speaker 1 (61. Creating and Outputting the Shopping List)

Inside the parentheses,

1:57

S… Speaker 1 (61. Creating and Outputting the Shopping List)

I'm going to use string interpolation to also output ingredient

2:01

S… Speaker 1 (61. Creating and Outputting the Shopping List)

amount.

2:04

S… Speaker 2 (61. Creating and Outputting the Shopping List)

With that,

2:04

S… Speaker 1 (61. Creating and Outputting the Shopping List)

if we now save this,

2:06

S… Speaker 1 (61. Creating and Outputting the Shopping List)

we already see our shopping list here at the bottom.

2:09

S… Speaker 1 (61. Creating and Outputting the Shopping List)

The last missing piece I want to add is this shopping list edit

2:13

S… Speaker 1 (61. Creating and Outputting the Shopping List)

section here,

2:15

S… Speaker 1 (61. Creating and Outputting the Shopping List)

which should display us an input field,

2:17

S… Speaker 1 (61. Creating and Outputting the Shopping List)

which then allows us to actually edit our items or add new ones.

2:21

S… Speaker 1 (61. Creating and Outputting the Shopping List)

At least later in the course,

2:22

S… Speaker 1 (61. Creating and Outputting the Shopping List)

it will add this functionality.

Bản ghi này được tạo bởi AI (tự động nhận dạng giọng nói). Có thể chứa lỗi — kiểm tra với âm thanh gốc để sử dụng quan trọng. Chính sách AI

❤️ Bạn yêu thích STT.ai? Hãy chia sẻ với bạn bè!

Tóm tắt

Nhấn tổng hợp để tạo một tóm tắt AI của bản ghi này.

Hỏi AI về bản ghi này

Hỏi bất cứ điều gì về bản ghi chép này - AI sẽ tìm thấy các phần liên quan và trả lời.

Phiên âm