102. What Happens behind the Scenes on Structural Directives

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

Tento přepis dnes vyprší. Upgrade pro trvalé skladování →

Index přednášek

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.

Tento přepis byl vytvořen AI (automatické rozpoznávání řeči). Může obsahovat chyby?? ověřit proti původnímu zvuku pro kritické použití. Politika AI

❤️ Máte rádi STT.ai? Řekněte to přátelům!

Shrnutí

Klikněte na Summarise pro generování AI shrnutí tohoto přepisu.

Zeptejte se UI na tento transcript

Zeptejte se na cokoliv o tomto přepisu, najdete příslušné sekce a odpověď.

Přepsat další