23_working_with_component_styles

Jul 13, 2026 07:14 · 4:02 · English · Whisper Turbo · 1 Skaļruņi

Šis transkripts zaudē spēku šodien. Atjaunināt pastāvīgai uzglabāšanai →

Lekcija indekss

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.

Šis transkripts tika ģenerēts ar AI (automātiskā runas atpazīšana). Var saturēt kļūdas — pārbaudīt pret oriģinālo audio kritiskai lietošanai. AI politika

❤️ Patīk STT.ai? Pastāsti draugiem!

Kopsavilkums

Noklikšķiniet uz Summarize, lai ģenerētu AI šī transkripta kopsavilkumu.

Vaicāt AI par šo transkripciju

Jautāt kaut ko par šo stenogrammu — AI atradīs attiecīgās sadaļas un atbildēs.

Atzīmēt citu