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 අදාළ කොටස් සොයා සහ පිළිතුරු දෙනු ඇත.

වෙනත් පරිවර්තනය කරන්න