59. Working on the ShoppingListComponent

Jul 14, 2026 04:30 · 1:50 · English · Whisper Turbo · 2 ਸਪੀਕਰ

ਇਹ ਟਰਾਂਸਕਰੀਪਟ ਅੱਜ ਮਿਆਦ ਪੁੱਗਦੀ ਹੈ । ਸਥਾਈ ਸਟੋਰੇਜ਼ ਲਈ ਅੱਪਗਰੇਡ →

ਪੜ੍ਹਨ ਇੰਡੈਕਸ

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.

ਇਹ ਟਰਾਂਸਕਰੀਪਟ AI (ਆਟੋਮੈਟਿਕ ਬੋਲੀ ਪਛਾਣ) ਵਲੋਂ ਬਣਾਈ ਗਈ ਹੈ । ਇਸ ਵਿੱਚ ਗਲਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ - ਗੰਭੀਰ ਵਰਤੋਂ ਲਈ ਅਸਲੀ ਆਡੀਓ ਨਾਲ ਜਾਂਚ ਕਰੋ । AI ਪਾਲਸੀ

❤️ STT.ai ਪਸੰਦ ਹੈ? ਆਪਣੇ ਦੋਸਤਾਂ ਨੂੰ ਦੱਸੋ!

ਸੰਖੇਪ

ਇਸ ਟਰਾਂਸਕਰੀਪਟ ਦਾ AI ਸੰਖੇਪ ਬਣਾਉਣ ਲਈ ਸੰਖੇਪ ਕਲਿੱਕ ਕਰੋ ।

ਇਹ ਟਰਾਂਸਕਰੀਪਟ ਬਾਰੇ AI ਨੂੰ ਪੁੱਛੋ

ਇਸ ਟਰਾਂਸਕਰੀਪਟ ਬਾਰੇ ਕੁਝ ਪੁੱਛੋ — AI ਸਬੰਧਤ ਭਾਗ ਲੱਭੇਗਾ ਅਤੇ ਜਵਾਬ ਦੇਵੇਗਾ।

ਹੋਰ ਟਰਾਂਸਕਰੀਪਟ