59. Working on the ShoppingListComponent

Jul 14, 2026 04:30 · 1:50 · English · Whisper Turbo · 2 Qof-dheer

Qoraalkani wuxuu dhacayaa maanta. Kordhinta kaydinta joogtada ah →

Liiska Qoraalka

0:01

S… Speaker 1 (59. Working on the ShoppingListComponent)

We finished,

0:02

S… Speaker 2 (59. Working on the ShoppingListComponent)

for now,

0:03

S… Speaker 1 (59. Working on the ShoppingListComponent)

all our recipes components.

0:05

S… Speaker 1 (59. Working on the ShoppingListComponent)

Let's work on the shopping list now.

0:08

S… Speaker 2 (59. Working on the ShoppingListComponent)

Now,

0:09

S… Speaker 1 (59. Working on the ShoppingListComponent)

the shopping list component,

0:10

S… Speaker 1 (59. Working on the ShoppingListComponent)

if we have a look at it here in our files,

0:14

S… Speaker 1 (59. Working on the ShoppingListComponent)

here in the HTML file,

0:16

S… Speaker 1 (59. Working on the ShoppingListComponent)

we already added some content to its template

0:21

S… Speaker 1 (59. Working on the ShoppingListComponent)

here.

0:22

S… Speaker 1 (59. Working on the ShoppingListComponent)

But instead of saying the list,

0:24

S… Speaker 1 (59. Working on the ShoppingListComponent)

I want to output an unordered list of type list group.

0:28

S… Speaker 1 (59. Working on the ShoppingListComponent)

with the class list group,

0:29

S… Speaker 1 (59. Working on the ShoppingListComponent)

I should say, so using this bootstrap class.

0:31

S… Speaker 1 (59. Working on the ShoppingListComponent)

And in there,

0:32

S… Speaker 1 (59. Working on the ShoppingListComponent)

I want to have clickable list items.

0:34

S… Speaker 1 (59. Working on the ShoppingListComponent)

So I'll add an anchor tag pointing to just hash for now again to

0:39

S… Speaker 1 (59. Working on the ShoppingListComponent)

make sure it doesn't reload the page accidentally.

0:41

S… Speaker 1 (59. Working on the ShoppingListComponent)

And then add some bootstrap classes,

0:44

S… Speaker 1 (59. Working on the ShoppingListComponent)

or one class to be precise,

0:46

S… Speaker 1 (59. Working on the ShoppingListComponent)

the list group item class to make this look like an item in this unordered

0:50

S… Speaker 1 (59. Working on the ShoppingListComponent)

list.

0:51

S… Speaker 1 (59. Working on the ShoppingListComponent)

And I'll even get rid of the anchor tag here,

0:54

S… Speaker 1 (59. Working on the ShoppingListComponent)

of the ref, I should say,

0:55

S… Speaker 1 (59. Working on the ShoppingListComponent)

and therefore set an inline style to enforce a

0:59

S… Speaker 1 (59. Working on the ShoppingListComponent)

cursor which looks like the pointer.

1:01

S… Speaker 1 (59. Working on the ShoppingListComponent)

The reason why I'm removing this is I will later use this like

1:05

S… Speaker 1 (59. Working on the ShoppingListComponent)

a button and therefore I don't need this ref

1:09

S… Speaker 2 (59. Working on the ShoppingListComponent)

element there.

1:10

S… Speaker 1 (59. Working on the ShoppingListComponent)

It would simply lead to unwanted behaviors.

1:13

S… Speaker 1 (59. Working on the ShoppingListComponent)

So that will be a single element,

1:16

S… Speaker 1 (59. Working on the ShoppingListComponent)

a single item on our shopping list.

1:19

S… Speaker 1 (59. Working on the ShoppingListComponent)

Now to display something here,

1:22

S… Speaker 1 (59. Working on the ShoppingListComponent)

we need an array of ingredients though.

1:24

S… Speaker 1 (59. Working on the ShoppingListComponent)

So what I'll do for now is I'll add my ingredients

1:30

S… Speaker 1 (59. Working on the ShoppingListComponent)

property here to the shopping list and this will be an empty array.

1:35

S… Speaker 1 (59. Working on the ShoppingListComponent)

But now just like with the recipe,

1:37

S… Speaker 1 (59. Working on the ShoppingListComponent)

we're going to use ingredients a lot throughout our app,

1:40

S… Speaker 1 (59. Working on the ShoppingListComponent)

also in the recipe section.

1:42

S… Speaker 1 (59. Working on the ShoppingListComponent)

So we probably should also create a model for this.

1:45

S… Speaker 1 (59. Working on the ShoppingListComponent)

Let's do this in the next lecture.

Qoraalkan waxaa abuuray AI (u aqoonsiga hadalka otomaatiga ah). Waxay ku jiri kartaa khaladaad — xaqiijin ka dhanka ah audio asalka ah ee isticmaalka muhiimka ah. Xeerka AI

❤️ Jecel STT.ai? Ka warran saaxiibbadaa!

Qiyaas

Riix Summarize in ay soo saaraan AI faahfaahin ka mid ah qoraalkan.

Su'aal AI Ku saabsan this transcript

Su'aal wax kasta oo ku saabsan qoraalkan - AI ka heli doonaa qaybaha la xiriira iyo jawaab.

Ku dheji mid kale