52. Using the Components

Jul 14, 2026 04:27 · 3:15 · English · Whisper Turbo · 1 Højttalere

Udskriften udløber i dag. Opgradering til permanent opbevaring →

Forelæsningsindeks

0:01

S… Speaker 1 (52. Using the Components)

We created all these components.

0:03

S… Speaker 1 (52. Using the Components)

Let's start using them.

0:05

S… Speaker 1 (52. Using the Components)

I will start using them in the app component HTML file.

0:09

S… Speaker 1 (52. Using the Components)

Here,

0:10

S… Speaker 1 (52. Using the Components)

where I say I'm working,

0:11

S… Speaker 1 (52. Using the Components)

here I want to display my app recipes component.

0:14

S… Speaker 1 (52. Using the Components)

So the one we created here in the recipes folder.

0:17

S… Speaker 1 (52. Using the Components)

And below it,

0:18

S… Speaker 1 (52. Using the Components)

the app shopping list component.

0:21

S… Speaker 1 (52. Using the Components)

So this component here.

0:23

S… Speaker 1 (52. Using the Components)

If we save this.

0:25

S… Speaker 1 (52. Using the Components)

We see recipes works and shopping list works,

0:27

S… Speaker 1 (52. Using the Components)

which of course are the default strings the CLI gave us here.

0:31

S… Speaker 1 (52. Using the Components)

So with these added and working here,

0:34

S… Speaker 1 (52. Using the Components)

let's now also work on the individual components here,

0:37

S… Speaker 1 (52. Using the Components)

starting with recipes maybe.

0:39

S… Speaker 1 (52. Using the Components)

In my recipes component,

0:42

S… Speaker 1 (52. Using the Components)

as I said,

0:43

S… Speaker 1 (52. Using the Components)

in my setup,

0:44

S… Speaker 1 (52. Using the Components)

I want to have the recipes list and detail next to each other.

0:48

S… Speaker 1 (52. Using the Components)

So for this,

0:48

S… Speaker 1 (52. Using the Components)

I'll add a row div here.

0:51

S… Speaker 1 (52. Using the Components)

And in this row,

0:52

S… Speaker 1 (52. Using the Components)

I'll add a div with the class colmd5 to

0:57

S… Speaker 1 (52. Using the Components)

have a smaller column on the left.

0:59

S… Speaker 1 (52. Using the Components)

And then another one with colmd7,

1:02

S… Speaker 1 (52. Using the Components)

using these bootstrap column sizing classes,

1:05

S… Speaker 1 (52. Using the Components)

to have a broader column on the right.

1:07

S… Speaker 1 (52. Using the Components)

So two columns next to each other.

1:09

S… Speaker 1 (52. Using the Components)

Now in the first column,

1:11

S… Speaker 1 (52. Using the Components)

I want to have my app recipe list component.

1:15

S… Speaker 1 (52. Using the Components)

In the second one,

1:17

S… Speaker 1 (52. Using the Components)

I want to have my app recipe detail component,

1:20

S… Speaker 1 (52. Using the Components)

just like that.

1:21

S… Speaker 1 (52. Using the Components)

So that should place these two components next to each other.

1:25

S… Speaker 1 (52. Using the Components)

If we save this and have a look at our app,

1:28

S… Speaker 1 (52. Using the Components)

We indeed see list and detail below each other simply

1:32

S… Speaker 1 (52. Using the Components)

because due to the console,

1:34

S… Speaker 1 (52. Using the Components)

the viewport was so small and then it automatically wraps them

1:38

S… Speaker 1 (52. Using the Components)

below each other.

1:38

S… Speaker 1 (52. Using the Components)

So if you have a normal page,

1:40

S… Speaker 1 (52. Using the Components)

they sit next to each other and I actually want them to wrap below each other on

1:44

S… Speaker 1 (52. Using the Components)

smaller pages.

1:45

S… Speaker 1 (52. Using the Components)

So this is now working too.

1:48

S… Speaker 1 (52. Using the Components)

Now in my recipe list component here,

1:51

S… Speaker 1 (52. Using the Components)

as I said,

1:52

S… Speaker 1 (52. Using the Components)

I somehow want to include that recipe item.

1:55

S… Speaker 1 (52. Using the Components)

So here I will later output a list of items.

1:58

S… Speaker 1 (52. Using the Components)

For now, I will simply include the recipe item here,

2:01

S… Speaker 1 (52. Using the Components)

app recipe item,

2:02

S… Speaker 1 (52. Using the Components)

so only the selector,

2:03

S… Speaker 1 (52. Using the Components)

which should now ensure that we no longer see recipe list works,

2:07

S… Speaker 1 (52. Using the Components)

but recipe item works,

2:09

S… Speaker 1 (52. Using the Components)

because that's the only content of our recipe list component for now.

2:12

S… Speaker 1 (52. Using the Components)

So that's looking great.

2:14

S… Speaker 1 (52. Using the Components)

Now for the shopping list,

2:16

S… Speaker 1 (52. Using the Components)

I'll do pretty much the same.

2:17

S… Speaker 1 (52. Using the Components)

In my shopping list component,

2:19

S… Speaker 1 (52. Using the Components)

here I want to display the list and above it this shopping edit

2:24

S… Speaker 1 (52. Using the Components)

area.

2:25

S… Speaker 1 (52. Using the Components)

So I'll add a row here too.

2:26

S… Speaker 1 (52. Using the Components)

And in this row,

2:28

S… Speaker 1 (52. Using the Components)

let's say we'll call XS10 to create a very wide column

2:32

S… Speaker 1 (52. Using the Components)

here.

2:32

S… Speaker 1 (52. Using the Components)

I'll first add my shopping edit component to have this

2:36

S… Speaker 1 (52. Using the Components)

editing area at the top where we can add new ingredients or edit existing

2:40

S… Speaker 1 (52. Using the Components)

ones.

2:41

S… Speaker 1 (52. Using the Components)

And then I want to have a horizontal line here and somehow output

2:46

S… Speaker 1 (52. Using the Components)

my list below this.

2:48

S… Speaker 1 (52. Using the Components)

So that is the rough setup I want to have in this component.

2:51

S… Speaker 1 (52. Using the Components)

So it should work like this.

2:53

S… Speaker 1 (52. Using the Components)

That will be the recipe list component later on.

2:55

S… Speaker 1 (52. Using the Components)

We're going to fill this with more life,

2:57

S… Speaker 1 (52. Using the Components)

but for now,

2:58

S… Speaker 1 (52. Using the Components)

I'm very happy with how that looks.

3:00

S… Speaker 1 (52. Using the Components)

Talking about how it looks,

3:02

S… Speaker 1 (52. Using the Components)

the header really kind of destroys our whole layout here.

3:06

S… Speaker 1 (52. Using the Components)

So let's work on the header in the next lecture,

3:08

S… Speaker 1 (52. Using the Components)

and let's actually bring it into its almost final form already.

Denne udskrift blev genereret af AI (automatisk talegenkendelse). Kan indeholde fejl! verificere mod den oprindelige lyd til kritisk brug. AI-politik

❤️ Elsker du STT.ai? Fortæl det til dine venner!

Oversigt

Klik på Summarize for at generere en AI resumé af denne udskrift.

Spørg AI om denne transskription

Spørg om noget om denne udskrift! AI vil finde relevante sektioner og svar.

Transskriber et andet