24_fully_understanding_the_component_selector

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

This transcript expires today. Upgrade for permanent storage →

Lecture Index

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

This transcript was generated by AI (automatic speech recognition). May contain errors — verify against the original audio for critical use. AI policy

❤️ Love STT.ai? Tell your friends!

Summary

Click Summarize to generate an AI summary of this transcript.

Ask AI About This Transcript

Ask anything about this transcript — the AI will find relevant sections and answer.

Transcribe Another