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는 관련 섹션을 찾아 답변합니다.

다른 변환