38_using_nglf_to_output_data_conditionally

Jul 13, 2026 07:20 · 3:53 · English · Whisper Turbo · 1 Сөйләүчеләр

Бүгенге көндә бу бинада китапханә эшли. Кайвакытлы саклау өчен яңарту →

Укыту индексы

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.

Бу транскрипция уйлап табылган (автомат сөйләм таныу) ярдәмендә ясалган. Анда хаталар булырга мөмкин - мөһим куллану өчен оригинал аудио белән тикшерегез. AI сәясәт

❤️ STT.aiне яратасызмы?

Тиздән

Бу терминның берничә мәгънәсе бар: Транссибирь тимер юлының Транссибирь бүлекчәсе

Бу транскрипция турында АА-дан сорагыз

Бу ысулның төп өстенлеге — ул җөмләнең эчтәлеген һәм аның эчтәлеген аңлатучы җөмләләрне аерып күрсәтә.

Башкасын күчерү