103. Building a Structural Directive

0:02

S… Speaker 2 (103. Building a Structural Directive)

Now that we understood what the role of the star is,

0:05

S… Speaker 2 (103. Building a Structural Directive)

we can write our own structural directive.

0:08

S… Speaker 2 (103. Building a Structural Directive)

So let's create a new directive and I will use

0:12

S… Speaker 2 (103. Building a Structural Directive)

the CLI for this.

0:13

S… Speaker 2 (103. Building a Structural Directive)

I will name it UNLESS.

0:15

S… Speaker 2 (103. Building a Structural Directive)

So I will basically create the opposite of the NGIF directive.

0:20

S… Speaker 2 (103. Building a Structural Directive)

This directive here will attach something only if the condition is false.

0:24

S… Speaker 2 (103. Building a Structural Directive)

NGIF does it if the condition is true.

0:27

S… Speaker 2 (103. Building a Structural Directive)

So here I'll again delete the spec file here.

0:31

S… Speaker 2 (103. Building a Structural Directive)

And in the unless directive,

0:32

S… Speaker 2 (103. Building a Structural Directive)

I get my selector,

0:33

S… Speaker 1 (103. Building a Structural Directive)

which is fine.

0:34

S… Speaker 1 (103. Building a Structural Directive)

Now here,

0:36

S… Speaker 2 (103. Building a Structural Directive)

I need to get the condition as an input.

0:39

S… Speaker 2 (103. Building a Structural Directive)

So I'll add at input.

0:41

S… Speaker 2 (103. Building a Structural Directive)

And remember,

0:42

S… Speaker 2 (103. Building a Structural Directive)

in the end, we will use property binding with the square brackets because Angular

0:47

S… Speaker 2 (103. Building a Structural Directive)

transforms it for us.

0:48

S… Speaker 1 (103. Building a Structural Directive)

We need to,

0:50

S… Speaker 1 (103. Building a Structural Directive)

of course,

0:51

S… Speaker 2 (103. Building a Structural Directive)

import input from at Angular core.

0:56

S… Speaker 1 (103. Building a Structural Directive)

And then here,

0:57

S… Speaker 2 (103. Building a Structural Directive)

I want to bind to a property named unless,

1:01

S… Speaker 2 (103. Building a Structural Directive)

which kind of simply is the condition we get.

1:03

S… Speaker 1 (103. Building a Structural Directive)

But whenever this condition changes,

1:06

S… Speaker 2 (103. Building a Structural Directive)

so whenever some input parameter here changes,

1:10

S… Speaker 2 (103. Building a Structural Directive)

I want to execute a method.

1:12

S… Speaker 2 (103. Building a Structural Directive)

And therefore I can implement a setter with the set keyword.

1:15

S… Speaker 2 (103. Building a Structural Directive)

This now turns this into a method,

1:19

S… Speaker 1 (103. Building a Structural Directive)

though technically,

1:21

S… Speaker 1 (103. Building a Structural Directive)

and that's important to understand,

1:22

S… Speaker 2 (103. Building a Structural Directive)

this still is a property.

1:24

S… Speaker 2 (103. Building a Structural Directive)

It's just a setter of the property,

1:27

S… Speaker 2 (103. Building a Structural Directive)

which is a method which gets executed whenever the property changes.

1:31

S… Speaker 2 (103. Building a Structural Directive)

And it of course changes whenever it changes outside of

1:35

S… Speaker 2 (103. Building a Structural Directive)

this directive.

1:36

S… Speaker 2 (103. Building a Structural Directive)

So whenever the condition we pass changes or some parameter of this condition.

1:41

S… Speaker 2 (103. Building a Structural Directive)

unless therefore needs to receive the value the

1:46

S… Speaker 2 (103. Building a Structural Directive)

property would normally get as an input.

1:48

S… Speaker 2 (103. Building a Structural Directive)

And we know that this will be a Boolean because it will be our condition in the end.

1:52

S… Speaker 2 (103. Building a Structural Directive)

So we could also name this condition.

1:54

S… Speaker 2 (103. Building a Structural Directive)

Then we can check if the condition is not true,

1:59

S… Speaker 1 (103. Building a Structural Directive)

which is the case in which I want to display

2:04

S… Speaker 2 (103. Building a Structural Directive)

something because unless it's the opposite of ngf.

2:07

S… Speaker 1 (103. Building a Structural Directive)

And if the condition is true,

2:09

S… Speaker 2 (103. Building a Structural Directive)

well, then I want to display nothing.

2:11

S… Speaker 2 (103. Building a Structural Directive)

So that is how we get the condition,

2:13

S… Speaker 2 (103. Building a Structural Directive)

how we use it,

2:14

S… Speaker 2 (103. Building a Structural Directive)

how do we display something.

2:16

S… Speaker 2 (103. Building a Structural Directive)

Keep in mind that our unless

2:20

S… Speaker 2 (103. Building a Structural Directive)

directive here in the end will sit on such

2:25

S… Speaker 2 (103. Building a Structural Directive)

a ng -template component because that is what it

2:29

S… Speaker 2 (103. Building a Structural Directive)

gets transformed to by Angular if we use the star.

2:31

S… Speaker 1 (103. Building a Structural Directive)

So we can get access to this template and

2:36

S… Speaker 2 (103. Building a Structural Directive)

we also need to get access to the place in the document where we want to render it.

2:40

S… Speaker 2 (103. Building a Structural Directive)

Both can be injected.

2:42

S… Speaker 1 (103. Building a Structural Directive)

The template can be injected by adding template ref,

2:47

S… Speaker 2 (103. Building a Structural Directive)

any name you like,

2:49

S… Speaker 1 (103. Building a Structural Directive)

but the type is of type template ref.

2:51

S… Speaker 2 (103. Building a Structural Directive)

So just like element ref gave us access to the element the

2:55

S… Speaker 1 (103. Building a Structural Directive)

directive was on,

2:56

S… Speaker 1 (103. Building a Structural Directive)

template ref does the same for a template.

2:58

S… Speaker 2 (103. Building a Structural Directive)

And this is a generic type.

3:00

S… Speaker 2 (103. Building a Structural Directive)

You can simply pass any here.

3:02

S… Speaker 2 (103. Building a Structural Directive)

And we need to import template ref from at Angular core.

3:05

S… Speaker 2 (103. Building a Structural Directive)

The second information piece we need is the view container.

3:09

S… Speaker 2 (103. Building a Structural Directive)

So where should we render it?

3:11

S… Speaker 1 (103. Building a Structural Directive)

The template is the what.

3:13

S… Speaker 2 (103. Building a Structural Directive)

Now the question is where.

3:14

S… Speaker 2 (103. Building a Structural Directive)

So I'll name it vcref for view container reference.

3:19

S… Speaker 2 (103. Building a Structural Directive)

And the type is view container reference or

3:23

S… Speaker 2 (103. Building a Structural Directive)

view container ref,

3:24

S… Speaker 2 (103. Building a Structural Directive)

which is also imported from at Angular core.

3:26

S… Speaker 2 (103. Building a Structural Directive)

That marks the place where we placed this

3:30

S… Speaker 2 (103. Building a Structural Directive)

directive in the document.

3:32

S… Speaker 2 (103. Building a Structural Directive)

Angular marks this place.

3:34

S… Speaker 2 (103. Building a Structural Directive)

And you can see this if you inspect it in the developer tools actually.

3:37

S… Speaker 2 (103. Building a Structural Directive)

So with these two tools available,

3:41

S… Speaker 2 (103. Building a Structural Directive)

We can use the VCRef whenever the condition changes to

3:46

S… Speaker 2 (103. Building a Structural Directive)

call the createEmbeddedView method,

3:48

S… Speaker 1 (103. Building a Structural Directive)

which does just what the name implies.

3:51

S… Speaker 2 (103. Building a Structural Directive)

It creates a view in this view container.

3:54

S… Speaker 1 (103. Building a Structural Directive)

And the view simply is our template ref.

3:57

S… Speaker 2 (103. Building a Structural Directive)

So this template we created there is exactly this reference to

4:02

S… Speaker 1 (103. Building a Structural Directive)

the template there is exactly what we need.

4:04

S… Speaker 1 (103. Building a Structural Directive)

Well,

4:05

S… Speaker 2 (103. Building a Structural Directive)

and if the condition is true in this case,

4:08

S… Speaker 2 (103. Building a Structural Directive)

so if it's not what we are looking for,

4:10

S… Speaker 2 (103. Building a Structural Directive)

then we will simply call the clear method to remove everything

4:14

S… Speaker 2 (103. Building a Structural Directive)

from this place in the DOM.

4:16

S… Speaker 1 (103. Building a Structural Directive)

With that,

4:18

S… Speaker 1 (103. Building a Structural Directive)

our own directive is set up.

4:20

S… Speaker 2 (103. Building a Structural Directive)

Of course, we need to make sure that it is added here.

4:22

S… Speaker 2 (103. Building a Structural Directive)

The CLI did this for us.

4:24

S… Speaker 2 (103. Building a Structural Directive)

And now in the app component,

4:26

S… Speaker 2 (103. Building a Structural Directive)

we can use our own directive maybe to

4:31

S… Speaker 2 (103. Building a Structural Directive)

replace ngf here.

4:33

S… Speaker 2 (103. Building a Structural Directive)

So I'll comment out all this stuff here.

4:38

S… Speaker 2 (103. Building a Structural Directive)

and only copy the original div down

4:43

S… Speaker 1 (103. Building a Structural Directive)

there.

4:43

S… Speaker 2 (103. Building a Structural Directive)

Comment this in,

4:45

S… Speaker 1 (103. Building a Structural Directive)

of course.

4:45

S… Speaker 1 (103. Building a Structural Directive)

So here,

4:47

S… Speaker 2 (103. Building a Structural Directive)

instead of using ngif,

4:49

S… Speaker 2 (103. Building a Structural Directive)

I'll use app unless.

4:50

S… Speaker 2 (103. Building a Structural Directive)

And the star is important because it still is a structural directive.

4:54

S… Speaker 2 (103. Building a Structural Directive)

Otherwise,

4:55

S… Speaker 2 (103. Building a Structural Directive)

we would have to manually write it with this ng -template syntax you learned

4:59

S… Speaker 1 (103. Building a Structural Directive)

before.

5:01

S… Speaker 1 (103. Building a Structural Directive)

So here,

5:01

S… Speaker 2 (103. Building a Structural Directive)

of course, we don't want to check if only odd is false because keep in mind

5:05

S… Speaker 2 (103. Building a Structural Directive)

the unless directive will check for the opposite already.

5:08

S… Speaker 2 (103. Building a Structural Directive)

So here we have to pass just only odd.

5:11

S… Speaker 1 (103. Building a Structural Directive)

And with this in place,

5:13

S… Speaker 2 (103. Building a Structural Directive)

we get that we can't bind to app unless because it's not a known

5:17

S… Speaker 1 (103. Building a Structural Directive)

property.

5:18

S… Speaker 2 (103. Building a Structural Directive)

Why do we get this?

5:21

S… Speaker 2 (103. Building a Structural Directive)

can be really hard to track we get this error because what

5:25

S… Speaker 2 (103. Building a Structural Directive)

we're trying to do is we have property binding here custom property binding

5:29

S… Speaker 2 (103. Building a Structural Directive)

with add input and we're binding a property named unless now

5:33

S… Speaker 2 (103. Building a Structural Directive)

keep in mind

5:34

S… Speaker 2 (103. Building a Structural Directive)

The star automatically transforms this in this ng -template syntax,

5:38

S… Speaker 2 (103. Building a Structural Directive)

where we then try to property bind to the directive name,

5:42

S… Speaker 2 (103. Building a Structural Directive)

which is appunless.

5:43

S… Speaker 2 (103. Building a Structural Directive)

So we have to make sure that our property here shares

5:48

S… Speaker 2 (103. Building a Structural Directive)

the name of the directive,

5:50

S… Speaker 2 (103. Building a Structural Directive)

appunless,

5:51

S… Speaker 2 (103. Building a Structural Directive)

exactly the same.

5:53

S… Speaker 2 (103. Building a Structural Directive)

the same as the selector now with this it works fine and

5:57

S… Speaker 2 (103. Building a Structural Directive)

as you can see if i toggle here we get the same behavior as before

6:01

S… Speaker 2 (103. Building a Structural Directive)

even though i commented out the ngif block and use my own

6:05

S… Speaker 2 (103. Building a Structural Directive)

app unless directive instead so this is our own custom

6:09

S… Speaker 2 (103. Building a Structural Directive)

structural directive built

103. Building a Structural Directive

Ringkasan

Takon AI Ngendi Transkrip Iki