37_understanding_directives

Jul 13, 2026 07:20 · 2:17 · English · Whisper Turbo · 2 Kaikōrero

Ka ngaro tēnei tāruatanga i tēnei rā. Whakahauhau mo te rokiroki tūturu →

Whakapānga

0:02

S… Speaker 1 (37_understanding_directives)

We're almost done with the basics about Angular.

0:05

S… Speaker 1 (37_understanding_directives)

We learned a lot about components,

0:07

S… Speaker 1 (37_understanding_directives)

the basic building block of any Angular app,

0:10

S… Speaker 1 (37_understanding_directives)

about how it starts the app,

0:12

S… Speaker 1 (37_understanding_directives)

how we can communicate with our templates in our

0:16

S… Speaker 1 (37_understanding_directives)

components so that we can output data or react to events.

0:20

S… Speaker 2 (37_understanding_directives)

Now,

0:21

S… Speaker 1 (37_understanding_directives)

there is one other key building block you probably use in any Angular

0:25

S… Speaker 1 (37_understanding_directives)

app you build.

0:26

S… Speaker 1 (37_understanding_directives)

Directives.

0:27

S… Speaker 1 (37_understanding_directives)

What are directives?

0:30

S… Speaker 1 (37_understanding_directives)

Directives are instructions in the DOM.

0:33

S… Speaker 1 (37_understanding_directives)

And we actually already use directives without knowing it.

0:37

S… Speaker 1 (37_understanding_directives)

Components are kind of such instructions in the DOM.

0:40

S… Speaker 1 (37_understanding_directives)

Once we place the selector of our component somewhere

0:44

S… Speaker 1 (37_understanding_directives)

in our templates,

0:45

S… Speaker 1 (37_understanding_directives)

at this point of time,

0:47

S… Speaker 1 (37_understanding_directives)

we're instructing Angular to add the content of

0:51

S… Speaker 1 (37_understanding_directives)

our component template and the business logic in our TypeScript code in

0:56

S… Speaker 1 (37_understanding_directives)

this place where we use the selector.

0:58

S… Speaker 1 (37_understanding_directives)

This was our instruction.

0:59

S… Speaker 1 (37_understanding_directives)

Angular,

1:00

S… Speaker 1 (37_understanding_directives)

please add our component in this place.

1:03

S… Speaker 1 (37_understanding_directives)

And indeed,

1:04

S… Speaker 1 (37_understanding_directives)

components are directives,

1:05

S… Speaker 1 (37_understanding_directives)

but directives with a template.

1:07

S… Speaker 1 (37_understanding_directives)

There are also directives without a template.

1:11

S… Speaker 1 (37_understanding_directives)

So an example would be the app turn

1:15

S… Speaker 1 (37_understanding_directives)

green directive,

1:16

S… Speaker 1 (37_understanding_directives)

which would be a custom directive we could build.

1:18

S… Speaker 1 (37_understanding_directives)

We typically add directives with a...

1:23

S… Speaker 1 (37_understanding_directives)

attribute selector,

1:24

S… Speaker 1 (37_understanding_directives)

but technically the selector of a directive can be configured just like

1:28

S… Speaker 1 (37_understanding_directives)

the selector of a component.

1:30

S… Speaker 1 (37_understanding_directives)

So you could also use CSS classes or the element style,

1:33

S… Speaker 1 (37_understanding_directives)

but again,

1:34

S… Speaker 1 (37_understanding_directives)

typically you use the attribute style.

1:36

S… Speaker 1 (37_understanding_directives)

And on this paragraph,

1:38

S… Speaker 1 (37_understanding_directives)

this directive might simply color the text green,

1:41

S… Speaker 1 (37_understanding_directives)

you could say.

1:42

S… Speaker 1 (37_understanding_directives)

So Angular would find this instruction.

1:46

S… Speaker 1 (37_understanding_directives)

Here we would have defined our directive with the directive decorator

1:51

S… Speaker 1 (37_understanding_directives)

to inform Angular that this class holds a directive.

1:54

S… Speaker 1 (37_understanding_directives)

And there we might have the logic to turn the screen.

1:57

S… Speaker 1 (37_understanding_directives)

Now we will learn how to write our own directives in

2:02

S… Speaker 1 (37_understanding_directives)

the section focused on directives in this course.

2:05

S… Speaker 1 (37_understanding_directives)

But there are a couple of built -in directives which are really

2:09

S… Speaker 1 (37_understanding_directives)

useful.

2:09

S… Speaker 1 (37_understanding_directives)

Let's take a closer look at how we use them and what they do for us in

2:13

S… Speaker 1 (37_understanding_directives)

the next lectures.

I hangaia tēnei tuhipoka e AI (whakaahua kōrero aunoa). Tērā pea kei roto ngā hapa - tirohia ki te oro taketake mō te whakamahinga tino hira. Ka taea te whakataki i te kaupapahere AI

❤️ E manakohia ana te STT.ai? Whakapāpāho ki ōna hoa!

Ko te whakarāpopoto

Ka pāhotia te Summarize hei waihanga i tētahi whakarāpopoto AI o tēnei tāruatanga.

E pātai ana ki te AI Mo tēnei whakahuatuhi

E pātai ana ki tētahi mea mo tēnei tāruatanga - ka kitea e te AI ngā wāhanga whai tikanga me te whakautu.

Ka whakamāori tētahi atu