102. What Happens behind the Scenes on Structural Directives

Jul 15, 2026 01:00 · 3:04 · English · Whisper Turbo · 2 Munyori

Iyi transcript inosvika pakupera nhasi. Upgrade for permanent storage →

Lecture Index

0:02

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

So now that we had a closer look at attribute directives and created our own one

0:06

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

before creating our own structural directive,

0:09

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

let me explain why this star is actually required.

0:13

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

This star indicates to Angular that this is a structural directive.

0:18

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

The question is,

0:19

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

why does it need to know?

0:20

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

Because structural directives with that star actually

0:25

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

are just a nicer way for us to use them,

0:28

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

basically.

0:29

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

Behind the scenes,

0:30

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

Angular will transform them into something else.

0:34

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

Because there is no star in Angular syntax

0:38

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

when using,

0:39

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

well,

0:40

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

directives or when using property binding or anything like that.

0:44

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

There is only property binding,

0:45

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

event binding,

0:46

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

two -way binding and string interpolation.

0:48

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

And there is no star.

0:51

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

operator or something like that.

0:53

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

So behind the scenes,

0:54

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

Angular needs to transform this ngif usage into

0:58

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

something where we end up with these tools,

1:01

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

property binding and so on.

1:03

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

And it does.

1:04

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

I can write the same list here differently.

1:07

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

So if I try to write this only

1:11

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

odd block differently,

1:13

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

I would end up with the following.

1:15

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

I would have a ng -template.

1:19

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

element that is provided by Angular as the ng indicates.

1:23

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

And inside this element,

1:26

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

we have the content we conditionally want to

1:30

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

render.

1:30

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

So in this case here,

1:32

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

we would have a div inside of this and in this div our list

1:37

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

item.

1:40

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

you probably see that it's basically the same but that it's wrapped in ngTemplate.

1:45

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

The reason for this is that ngTemplate is an element

1:49

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

which itself is not rendered but which allows us to define a

1:53

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

template in the end for Angular to use once it determines

1:57

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

that this template,

1:59

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

some element,

2:00

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

needs to be rendered because this condition is true in this case.

2:03

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

So on the ngTemplate,

2:05

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

we place ngIf

2:07

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

and now not with the star because this is the form to which it will

2:11

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

get transformed due to the star but instead with the tool we

2:15

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

already know with property binding and here we simply bind

2:20

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

well not only odd so the

2:24

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

condition

2:25

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

So now we're back to the tools we know without the star.

2:27

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

And that's why we have the star,

2:29

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

because obviously that's the more intuitive syntax to use,

2:33

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

directly placing it on the element we want to conditionally render.

2:37

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

But that would be the real content behind the scenes

2:41

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

to which it gets transformed.

2:43

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

Now, you don't need to use that,

2:45

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

but I find it super important to be aware of this.

2:47

S… Speaker 2 (102. What Happens behind the Scenes on Structural Directives)

Now, therefore,

2:48

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

if we save this,

2:49

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

we see the list twice and we see it disappear and appear twice

2:53

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

because it...

2:54

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

works exactly the same.

2:56

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

It is exactly the same code behind the scenes.

2:59

S… Speaker 1 (102. What Happens behind the Scenes on Structural Directives)

This is what the star transforms it to.

Kutaura kwacho kwakaitwa neAI (Automatic speech recognition). Kutaura kwacho kunogona kusanganisira matambudziko — tarisa pakutanga kwemashoko kuti uone kana zvakakodzera. AI policy

❤️ Love STT.ai? Chii shamwari dzako!

_Zvinyorwa

Tinya Summarize kuti uwane AI ongororo yechinyorwa ichi.

Ask AI About This Transcript

Kubvunza chero chinhu nezve iyi transcript - AI ichawana zvinyorwa zvinokosha uye mashoko.

_Kushandura