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は関連する部分を見つけて答えます。

別のものを転写