24_fully_understanding_the_component_selector

Jul 13, 2026 07:16 · 3:50 · English · Whisper Turbo · 2 Konekte

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

Endèks lekti

0:02

S… Speaker 1 (24_fully_understanding_the_component_selector)

Now, are you already a component ninja?

0:04

S… Speaker 1 (24_fully_understanding_the_component_selector)

We learned a lot about components,

0:06

S… Speaker 1 (24_fully_understanding_the_component_selector)

about the templates,

0:08

S… Speaker 1 (24_fully_understanding_the_component_selector)

options we have there,

0:09

S… Speaker 1 (24_fully_understanding_the_component_selector)

and about the styles.

0:10

S… Speaker 1 (24_fully_understanding_the_component_selector)

I want to focus on the last property we

0:14

S… Speaker 1 (24_fully_understanding_the_component_selector)

see in this component decorator for now,

0:17

S… Speaker 1 (24_fully_understanding_the_component_selector)

the selector.

0:18

S… Speaker 1 (24_fully_understanding_the_component_selector)

I already mentioned that this has to be a

0:22

S… Speaker 1 (24_fully_understanding_the_component_selector)

unique selector so that you don't override accidentally an already

0:27

S… Speaker 1 (24_fully_understanding_the_component_selector)

existing

0:28

S… Speaker 1 (24_fully_understanding_the_component_selector)

element or maybe a component made available by another third -party

0:32

S… Speaker 1 (24_fully_understanding_the_component_selector)

package you use in your project.

0:34

S… Speaker 1 (24_fully_understanding_the_component_selector)

There's one other piece of information about the selector though.

0:38

S… Speaker 1 (24_fully_understanding_the_component_selector)

You don't have to use this type of selector.

0:42

S… Speaker 1 (24_fully_understanding_the_component_selector)

Right now our selector

0:45

S… Speaker 1 (24_fully_understanding_the_component_selector)

is the same selector as we use it in CSS for

0:49

S… Speaker 1 (24_fully_understanding_the_component_selector)

selecting an element.

0:51

S… Speaker 1 (24_fully_understanding_the_component_selector)

So we have app servers here as an element and this is

0:55

S… Speaker 1 (24_fully_understanding_the_component_selector)

recognized by Angular because the selector we chose is

0:59

S… Speaker 1 (24_fully_understanding_the_component_selector)

app servers.

1:00

S… Speaker 1 (24_fully_understanding_the_component_selector)

And this basically just looks how you select elements in CSS,

1:04

S… Speaker 1 (24_fully_understanding_the_component_selector)

right?

1:05

S… Speaker 1 (24_fully_understanding_the_component_selector)

We select the h3 element by just typing h3

1:09

S… Speaker 1 (24_fully_understanding_the_component_selector)

here.

1:09

S… Speaker 1 (24_fully_understanding_the_component_selector)

We select the

1:11

S… Speaker 1 (24_fully_understanding_the_component_selector)

app servers element by just typing app servers

1:16

S… Speaker 1 (24_fully_understanding_the_component_selector)

here.

1:16

S… Speaker 1 (24_fully_understanding_the_component_selector)

So that actually works like a CSS selector

1:21

S… Speaker 1 (24_fully_understanding_the_component_selector)

and therefore you are not limited to selecting by

1:25

S… Speaker 2 (24_fully_understanding_the_component_selector)

element.

1:26

S… Speaker 1 (24_fully_understanding_the_component_selector)

You could put this into square brackets to

1:30

S… Speaker 1 (24_fully_understanding_the_component_selector)

use the attribute selector.

1:33

S… Speaker 1 (24_fully_understanding_the_component_selector)

So in CSS you can select elements by attribute by enclosing

1:37

S… Speaker 1 (24_fully_understanding_the_component_selector)

that attribute in square brackets.

1:40

S… Speaker 1 (24_fully_understanding_the_component_selector)

And now if you save this,

1:41

S… Speaker 1 (24_fully_understanding_the_component_selector)

you would see that our app actually is broken

1:46

S… Speaker 1 (24_fully_understanding_the_component_selector)

because if we have a look at the error message,

1:48

S… Speaker 1 (24_fully_understanding_the_component_selector)

app servers is an unknown element because now

1:53

S… Speaker 1 (24_fully_understanding_the_component_selector)

our code,

1:54

S… Speaker 1 (24_fully_understanding_the_component_selector)

Angular, doesn't recognize app servers anymore because

1:58

S… Speaker 1 (24_fully_understanding_the_component_selector)

we changed the selector to be an attribute.

2:02

S… Speaker 1 (24_fully_understanding_the_component_selector)

So to make this work again,

2:03

S… Speaker 1 (24_fully_understanding_the_component_selector)

we would have to comment this out or remove it and maybe add a div or

2:07

S… Speaker 2 (24_fully_understanding_the_component_selector)

any other element,

2:08

S… Speaker 1 (24_fully_understanding_the_component_selector)

a normal HTML element,

2:10

S… Speaker 1 (24_fully_understanding_the_component_selector)

which has an app service attribute now.

2:14

S… Speaker 1 (24_fully_understanding_the_component_selector)

Now with this custom attribute added now,

2:17

S… Speaker 1 (24_fully_understanding_the_component_selector)

now the app works again because now Angular selects the

2:21

S… Speaker 1 (24_fully_understanding_the_component_selector)

element by attribute and not by the element itself because we changed

2:26

S… Speaker 1 (24_fully_understanding_the_component_selector)

this selector.

2:28

S… Speaker 1 (24_fully_understanding_the_component_selector)

another alternative is to select by and I'm

2:32

S… Speaker 1 (24_fully_understanding_the_component_selector)

just going to comment this out so that the code is still there for reference

2:36

S… Speaker 1 (24_fully_understanding_the_component_selector)

to select by class so with a dot at the beginning app

2:40

S… Speaker 1 (24_fully_understanding_the_component_selector)

servers again just like in CSS so here

2:45

S… Speaker 1 (24_fully_understanding_the_component_selector)

We can now select by class.

2:47

S… Speaker 1 (24_fully_understanding_the_component_selector)

So let's add a new div here,

2:49

S… Speaker 1 (24_fully_understanding_the_component_selector)

which has a CSS class of app servers,

2:52

S… Speaker 1 (24_fully_understanding_the_component_selector)

which we of course could now also style.

2:55

S… Speaker 1 (24_fully_understanding_the_component_selector)

But besides that,

2:56

S… Speaker 1 (24_fully_understanding_the_component_selector)

it's also recognized by Angular as a selector,

2:59

S… Speaker 1 (24_fully_understanding_the_component_selector)

which is why we still see the app.

3:02

S… Speaker 1 (24_fully_understanding_the_component_selector)

Now these are all options you have as a side note selecting

3:06

S… Speaker 1 (24_fully_understanding_the_component_selector)

by ID won't work That's not supported by angular and

3:10

S… Speaker 1 (24_fully_understanding_the_component_selector)

all those pseudo selectors like hover and so on also don't

3:14

S… Speaker 1 (24_fully_understanding_the_component_selector)

work and You typically use the element style

3:18

S… Speaker 1 (24_fully_understanding_the_component_selector)

here app servers for components We will soon learn

3:22

S… Speaker 1 (24_fully_understanding_the_component_selector)

about directives another feature where this is different but for components

3:26

S… Speaker 1 (24_fully_understanding_the_component_selector)

you typically create your own

3:28

S… Speaker 1 (24_fully_understanding_the_component_selector)

elements and therefore you don't use that style and

3:33

S… Speaker 1 (24_fully_understanding_the_component_selector)

you don't use the attribute style instead you use app

3:37

S… Speaker 1 (24_fully_understanding_the_component_selector)

servers like element but it is important to understand that

3:41

S… Speaker 1 (24_fully_understanding_the_component_selector)

you are not limited to this and there might be use cases where you

3:45

S… Speaker 1 (24_fully_understanding_the_component_selector)

want to use a different selector

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