61. Creating and Outputting the Shopping List

Jul 14, 2026 04:31 · 2:27 · English · Whisper Turbo · 2 Ke Keiki

E pau kēia hoʻoili i kēia lā. Hoʻonui no ka mālama mau →

Ka Papa Hana

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.

I hana ʻia kēia transcript e AI (hoʻomaopopo leo mau). Hiki ke loaʻa nā hewa — e hōʻoia i ka leo mua no ka hoʻohana nui. Ka'ōlelo aʻo AI

❤️ Love STT.ai? E haʻi i kou mau hoaaloha!

Hōʻuluʻulu

Kaomi Summarize e hana i ka AI mahele o kēia transcript.

E nīnau i ka AI e pili ana i kēia transcript

E nīnau i kekahi mea e pili ana i kēia transcript - e loaʻa ana ka AI i nā ʻāpana pili a me ka pane.

Hoʻouna i kekahi