23_working_with_component_styles

Jul 13, 2026 07:14 · 4:02 · English · Whisper Turbo · 1 Konekte

Transkript sa a ekspire jodi a. Ajoutè pou depo perpétuel →

Endèks lekti

0:02

S… Speaker 1 (23_working_with_component_styles)

We understood the templates are important and that we can either use them inline

0:06

S… Speaker 1 (23_working_with_component_styles)

here or point to an external file.

0:09

S… Speaker 1 (23_working_with_component_styles)

What about styles?

0:11

S… Speaker 1 (23_working_with_component_styles)

We also have this style URLs property here and

0:15

S… Speaker 1 (23_working_with_component_styles)

we have these CSS files.

0:17

S… Speaker 1 (23_working_with_component_styles)

What can we do with those?

0:19

S… Speaker 1 (23_working_with_component_styles)

Let's go back to our app component for this.

0:21

S… Speaker 1 (23_working_with_component_styles)

Here we got a H3 tag and a horizontal line.

0:25

S… Speaker 1 (23_working_with_component_styles)

And if we have a look at our application,

0:27

S… Speaker 1 (23_working_with_component_styles)

it's not that pretty,

0:29

S… Speaker 1 (23_working_with_component_styles)

right? The I'm in the app component text here,

0:32

S… Speaker 1 (23_working_with_component_styles)

or all the text actually,

0:33

S… Speaker 1 (23_working_with_component_styles)

is sitting right on the edge here.

0:36

S… Speaker 1 (23_working_with_component_styles)

Not super pretty.

0:37

S… Speaker 1 (23_working_with_component_styles)

Now,

0:38

S… Speaker 1 (23_working_with_component_styles)

since we use Bootstrap,

0:40

S… Speaker 1 (23_working_with_component_styles)

of course, we can use some Bootstrap classes to enhance this.

0:43

S… Speaker 1 (23_working_with_component_styles)

So we could add a div with a container class around it.

0:48

S… Speaker 1 (23_working_with_component_styles)

then add a row,

0:49

S… Speaker 1 (23_working_with_component_styles)

and this is just using the CSS framework Bootstrap.

0:53

S… Speaker 1 (23_working_with_component_styles)

So these are some CSS classes provided by this framework,

0:56

S… Speaker 1 (23_working_with_component_styles)

nothing Angular specific.

0:57

S… Speaker 1 (23_working_with_component_styles)

And then we could add a column here,

1:00

S… Speaker 1 (23_working_with_component_styles)

XS12,

1:01

S… Speaker 1 (23_working_with_component_styles)

to have one column on all device widths.

1:04

S… Speaker 1 (23_working_with_component_styles)

Now if we add this,

1:06

S… Speaker 1 (23_working_with_component_styles)

we added some styling,

1:07

S… Speaker 1 (23_working_with_component_styles)

some normal CSS styling,

1:09

S… Speaker 1 (23_working_with_component_styles)

nothing Angular specific,

1:11

S… Speaker 1 (23_working_with_component_styles)

and our app looks a little bit nicer now.

1:15

S… Speaker 1 (23_working_with_component_styles)

This is great,

1:16

S… Speaker 1 (23_working_with_component_styles)

but we can also use some tools given to us by angular

1:20

S… Speaker 1 (23_working_with_component_styles)

Let's say this I'm in the app component heading here.

1:24

S… Speaker 1 (23_working_with_component_styles)

We want to change its style Maybe we

1:28

S… Speaker 1 (23_working_with_component_styles)

want to give to some blue color

1:31

S… Speaker 1 (23_working_with_component_styles)

We can do this by going to the app component CSS file,

1:35

S… Speaker 1 (23_working_with_component_styles)

which defines the styling for this component.

1:38

S… Speaker 1 (23_working_with_component_styles)

And now we can use or write normal CSS code.

1:42

S… Speaker 1 (23_working_with_component_styles)

So overwrite the style of the H3 tag and set

1:46

S… Speaker 1 (23_working_with_component_styles)

its color to some blue.

1:49

S… Speaker 1 (23_working_with_component_styles)

So maybe to this dark blue here.

1:52

S… Speaker 1 (23_working_with_component_styles)

If we now save this and we have a look at our application,

1:55

S… Speaker 1 (23_working_with_component_styles)

you see it's dark blue now.

1:59

S… Speaker 1 (23_working_with_component_styles)

This is how you can use this style file this CSS

2:04

S… Speaker 1 (23_working_with_component_styles)

file Referenced in the app component here to define

2:08

S… Speaker 1 (23_working_with_component_styles)

the styles for a component

2:11

S… Speaker 1 (23_working_with_component_styles)

Now, just like we were able to choose between external file

2:15

S… Speaker 1 (23_working_with_component_styles)

and inline code for the template,

2:19

S… Speaker 1 (23_working_with_component_styles)

we can do the same for the styling.

2:21

S… Speaker 1 (23_working_with_component_styles)

You notice that style URLs is an array here,

2:25

S… Speaker 1 (23_working_with_component_styles)

whereas template URL wasn't.

2:27

S… Speaker 1 (23_working_with_component_styles)

It is this because we could reference multiple external style

2:32

S… Speaker 1 (23_working_with_component_styles)

sheets here.

2:32

S… Speaker 1 (23_working_with_component_styles)

So you could add pointers to other style sheets.

2:36

S… Speaker 1 (23_working_with_component_styles)

But besides that,

2:37

S… Speaker 1 (23_working_with_component_styles)

I'm going to comment this out,

2:39

S… Speaker 1 (23_working_with_component_styles)

you can also set up another property which is just styles.

2:43

S… Speaker 1 (23_working_with_component_styles)

This also takes an array,

2:45

S… Speaker 1 (23_working_with_component_styles)

but now it takes an array of strings where you define the style in

2:49

S… Speaker 1 (23_working_with_component_styles)

this string,

2:50

S… Speaker 1 (23_working_with_component_styles)

so now in this file.

2:52

S… Speaker 1 (23_working_with_component_styles)

Here I'm going to use backticks again to be able to write a multi -line expression

2:57

S… Speaker 1 (23_working_with_component_styles)

here.

2:57

S… Speaker 1 (23_working_with_component_styles)

And then we could set up H3 here.

3:00

S… Speaker 1 (23_working_with_component_styles)

And to really show you that this is different,

3:02

S… Speaker 1 (23_working_with_component_styles)

I will set the color to,

3:05

S… Speaker 1 (23_working_with_component_styles)

now let's not say dark blue,

3:07

S… Speaker 1 (23_working_with_component_styles)

but to dodger blue.

3:09

S… Speaker 1 (23_working_with_component_styles)

And if I now save this and we go back to the application,

3:13

S… Speaker 1 (23_working_with_component_styles)

you see the blue updated.

3:16

S… Speaker 1 (23_working_with_component_styles)

Because now the inline style is taking over.

3:19

S… Speaker 1 (23_working_with_component_styles)

I commented out the other one.

3:21

S… Speaker 1 (23_working_with_component_styles)

Just like with the template,

3:23

S… Speaker 1 (23_working_with_component_styles)

you have to decide which one to use.

3:25

S… Speaker 1 (23_working_with_component_styles)

You can't combine style URLs and styles.

3:27

S… Speaker 1 (23_working_with_component_styles)

But both important here has to be an array.

3:31

S… Speaker 1 (23_working_with_component_styles)

That's the difference to template.

3:32

S… Speaker 1 (23_working_with_component_styles)

You must only have one template.

3:34

S… Speaker 1 (23_working_with_component_styles)

You may have multiple style files or style definitions.

3:38

S… Speaker 1 (23_working_with_component_styles)

And you can choose between inline and external file.

3:42

S… Speaker 1 (23_working_with_component_styles)

The rules are basically the same as for template.

3:45

S… Speaker 1 (23_working_with_component_styles)

If you have...

3:47

S… Speaker 1 (23_working_with_component_styles)

more code in there using an external file is a good idea.

3:50

S… Speaker 1 (23_working_with_component_styles)

If it's a short style definition like this,

3:53

S… Speaker 1 (23_working_with_component_styles)

why don't you just put it into the TypeScript file?

3:56

S… Speaker 1 (23_working_with_component_styles)

This is how you can work with templates and styles.

Transkript sa a te kreye pa AI (automatic speech recognition). Li ka gen erè — tcheke ak son orijinal la pou itilize kritik. Politik AI

❤️ Love STT.ai? Di zanmi ou yo!

Resume

Klike sou Remak pou kreye yon remak AI de transkript sa a.

Konbyen tan pou m' fè transkript la?

Mande nenpòt bagay sou transkript sa a - AI a pral jwenn seksyon ki enpòtan yo epi reponn.

Transkripte yon lòt