38_using_nglf_to_output_data_conditionally

Jul 13, 2026 07:20 · 3:53 · English · Whisper Turbo · 1 Speaker

Transkrip ini kadaluarsa hari ini. Tingkatkan untuk penyimpanan permanen →

Indeks Kuliah

0:02

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

In the example application we built thus far,

0:05

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

we haven't used any directives besides components,

0:08

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

which are directives,

0:09

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

that's important.

0:10

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

But we haven't used any other directives,

0:12

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

no built -in directives.

0:14

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

Now let's say one thing we want to do is,

0:17

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

we only want to show this server was

0:21

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

created text here.

0:23

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

There's no need to have this no server was created text to

0:27

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

be displayed.

0:28

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

So it would be nice if we could conditionally show this message.

0:32

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

And for that,

0:33

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

we need some help.

0:35

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

We can use a directive shipping with Angular,

0:38

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

the ngif directive.

0:40

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

Now,

0:41

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

it works like an if statement,

0:42

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

and to be precise,

0:44

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

it works like this.

0:45

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

In our service component here,

0:48

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

where we output the server creation status,

0:51

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

I will comment this out so that we can still reference this code,

0:55

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

but now I will add a new paragraph where I simply say,

0:58

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

server was created server

1:02

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

name is bind my server name.

1:04

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

Now with this in place it will still work,

1:07

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

but now we always see with every keystroke how we change this server

1:11

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

name, not really what I want.

1:13

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

Instead I want to output it as soon as we click this button here.

1:17

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

So what I can do is I can add a directive here.

1:21

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

And as I said,

1:22

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

typically directives are added by using an attribute selector.

1:26

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

And pretty much all the built -in directives use that selector.

1:29

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

NGIF does.

1:30

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

And then NGIF is added by adding a

1:34

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

star.

1:35

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

This is important.

1:36

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

NGIF.

1:38

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

The star is required because ngif is a structural directive,

1:43

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

which means it changes the structure of our DOM.

1:46

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

It either adds this element or it doesn't add it.

1:50

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

So that's just some extra information for Angular.

1:53

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

The directive itself is just ngif,

1:56

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

but the star is required.

1:58

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

Without it,

1:59

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

it will not work correctly.

2:00

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

So ngif,

2:02

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

and then we can...

2:04

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

set up our condition here between the quotation marks.

2:08

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

For ngif,

2:09

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

this has to be any expression returning true or false,

2:13

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

deciding whether this should be added or not.

2:16

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

So here,

2:17

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

it would make sense to add a new property,

2:20

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

which we name serverCreated and set it to false.

2:23

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

And we set this to true once the button is clicked.

2:26

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

So here in onCreateServer,

2:28

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

which is triggered when the button is clicked,

2:30

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

here we set serverCreated equal to true.

2:34

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

Like that.

2:35

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

Now with this we can go back to our template and simply bind

2:39

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

ngf2 server created.

2:42

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

And again,

2:43

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

this could also call a method which returns true or false or directly

2:47

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

perform the check between the quotation marks.

2:49

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

Anything which returns true or false.

2:52

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

Now with this,

2:53

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

if we save this,

2:54

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

what you see is that there is no text.

2:58

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

But if I name this test server 2 and click the button,

3:01

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

now the text is added here.

3:04

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

And the interesting thing is if I reload the app and we inspect

3:08

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

our DOM here,

3:09

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

you see here that's our app server component.

3:14

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

Below that is,

3:15

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

above that is the button.

3:17

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

But if I click this button,

3:18

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

a new element was entered here,

3:21

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

the paragraph.

3:22

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

And here you see kind of the hook which Angular

3:26

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

created to know where this should be entered.

3:28

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

But the important thing is it's really added or removed

3:32

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

to or from the DOM.

3:34

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

It's not there all the time.

3:35

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

It's not hidden.

3:36

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

It's just not there,

3:38

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

which is super important to understand.

3:40

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

So that's ngif.

3:42

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

Again, the start at the beginning indicates that this is a structural

3:46

S… Speaker 1 (38_using_nglf_to_output_data_conditionally)

directive really changing the DOM as you just saw.

Transkrip ini dibuat oleh AI (pengakuan bicara otomatis). Mungkin mengandung kesalahan å verifikasi terhadap audio asli untuk penggunaan kritis. Kebijakan AI

❤️ Suka STT.ai? Beri tahu teman-temanmu!

Ringkasan

Klik Summarize untuk membuat ringkasan AI dari transkrip ini.

Tanyakan AI Tentang Transcript Ini

Tanyakan apa saja tentang transkrip ini, AI akan menemukan bagian yang relevan dan jawaban.

Menandakan Yang Lain