104. Understanding ngSwitch

Jul 15, 2026 01:01 · 2:49 · English · Whisper Turbo · 2 Folës

Kjo transkriptë skadon sot. Përmirëso për ruajtje të përhershme →

Treguesi i leksioneve

0:02

S… Speaker 2 (104. Understanding ngSwitch)

I want to conclude the section with one other built -in structural

0:06

S… Speaker 2 (104. Understanding ngSwitch)

directive, which might be handy from time to time,

0:08

S… Speaker 2 (104. Understanding ngSwitch)

ngSwitch.

0:10

S… Speaker 2 (104. Understanding ngSwitch)

Imagine the case that we have a value

0:14

S… Speaker 1 (104. Understanding ngSwitch)

like this,

0:15

S… Speaker 2 (104. Understanding ngSwitch)

which is simply 10,

0:17

S… Speaker 2 (104. Understanding ngSwitch)

anything you want.

0:19

S… Speaker 2 (104. Understanding ngSwitch)

Now we got a place in our app where this value changes,

0:23

S… Speaker 2 (104. Understanding ngSwitch)

and we got a couple of different messages we want to display for each

0:28

S… Speaker 2 (104. Understanding ngSwitch)

of these values.

0:30

S… Speaker 1 (104. Understanding ngSwitch)

For this,

0:31

S… Speaker 2 (104. Understanding ngSwitch)

we can use ng switch.

0:34

S… Speaker 2 (104. Understanding ngSwitch)

So let's add a new div here below our paragraphs with our own attribute

0:38

S… Speaker 1 (104. Understanding ngSwitch)

directives.

0:40

S… Speaker 2 (104. Understanding ngSwitch)

And ngSwitched is used like this.

0:42

S… Speaker 2 (104. Understanding ngSwitch)

We bind to ngSwitch with property binding,

0:45

S… Speaker 2 (104. Understanding ngSwitch)

so no star at this point,

0:48

S… Speaker 2 (104. Understanding ngSwitch)

and we bind to value.

0:49

S… Speaker 2 (104. Understanding ngSwitch)

So this is our condition,

0:50

S… Speaker 2 (104. Understanding ngSwitch)

basically, what we want to check.

0:52

S… Speaker 2 (104. Understanding ngSwitch)

And then you might be aware that switch has a couple of cases we can now

0:56

S… Speaker 1 (104. Understanding ngSwitch)

cover.

0:56

S… Speaker 2 (104. Understanding ngSwitch)

So let's say we have a paragraph where we say value is 5,

1:00

S… Speaker 2 (104. Understanding ngSwitch)

then we have the same for 10,

1:02

S… Speaker 2 (104. Understanding ngSwitch)

then we have to say for 100,

1:03

S… Speaker 2 (104. Understanding ngSwitch)

and maybe for default.

1:06

S… Speaker 2 (104. Understanding ngSwitch)

Now we need to add something to these paragraphs to control which

1:11

S… Speaker 1 (104. Understanding ngSwitch)

paragraph gets shown,

1:12

S… Speaker 2 (104. Understanding ngSwitch)

because it should only be one of these at a time.

1:14

S… Speaker 2 (104. Understanding ngSwitch)

That something is ngSwitch case.

1:19

S… Speaker 2 (104. Understanding ngSwitch)

And we simply pass the value for this case

1:23

S… Speaker 2 (104. Understanding ngSwitch)

here as an argument,

1:24

S… Speaker 2 (104. Understanding ngSwitch)

for example,

1:25

S… Speaker 1 (104. Understanding ngSwitch)

1:25

S… Speaker 2 (104. Understanding ngSwitch)

And we need to start at the beginning.

1:27

S… Speaker 2 (104. Understanding ngSwitch)

That's super important.

1:29

S… Speaker 2 (104. Understanding ngSwitch)

So here the star comes into play again,

1:31

S… Speaker 2 (104. Understanding ngSwitch)

because behind the scenes,

1:32

S… Speaker 2 (104. Understanding ngSwitch)

this is then also transformed by Angular.

1:36

S… Speaker 2 (104. Understanding ngSwitch)

So now we can use this here for the other two use cases too with

1:40

S… Speaker 2 (104. Understanding ngSwitch)

10 and with 100.

1:43

S… Speaker 2 (104. Understanding ngSwitch)

And finally,

1:45

S… Speaker 1 (104. Understanding ngSwitch)

for the default case,

1:46

S… Speaker 2 (104. Understanding ngSwitch)

we have ng switch default like

1:50

S… Speaker 1 (104. Understanding ngSwitch)

this.

1:50

S… Speaker 2 (104. Understanding ngSwitch)

Now here,

1:52

S… Speaker 2 (104. Understanding ngSwitch)

we also need to add the star,

1:53

S… Speaker 1 (104. Understanding ngSwitch)

of course.

1:54

S… Speaker 2 (104. Understanding ngSwitch)

With this in place,

1:55

S… Speaker 1 (104. Understanding ngSwitch)

if we save this,

1:56

S… Speaker 2 (104. Understanding ngSwitch)

we only see 10 here.

1:58

S… Speaker 2 (104. Understanding ngSwitch)

And if I go to my component and I change this to five,

2:03

S… Speaker 1 (104. Understanding ngSwitch)

like this,

2:03

S… Speaker 2 (104. Understanding ngSwitch)

then of course we see five.

2:05

S… Speaker 2 (104. Understanding ngSwitch)

So this is ng -switch,

2:07

S… Speaker 1 (104. Understanding ngSwitch)

super easy to use,

2:08

S… Speaker 2 (104. Understanding ngSwitch)

might be useful in some cases where you find yourself creating a lot of ng

2:12

S… Speaker 2 (104. Understanding ngSwitch)

-if conditions,

2:13

S… Speaker 2 (104. Understanding ngSwitch)

ng -switch might be the better solution in such cases.

2:17

S… Speaker 2 (104. Understanding ngSwitch)

So that is structural directives finished

2:21

S… Speaker 2 (104. Understanding ngSwitch)

and that is directives overall finished.

2:23

S… Speaker 2 (104. Understanding ngSwitch)

You learned a lot about them and I hope this knowledge allows you to create

2:27

S… Speaker 2 (104. Understanding ngSwitch)

awesome directives for your applications in cases where the built -in ones

2:32

S… Speaker 2 (104. Understanding ngSwitch)

aren't everything you need,

2:33

S… Speaker 2 (104. Understanding ngSwitch)

even though these already cover a lot of the default use cases,

2:37

S… Speaker 2 (104. Understanding ngSwitch)

to be honest.

2:38

S… Speaker 2 (104. Understanding ngSwitch)

So let's move on.

2:40

S… Speaker 2 (104. Understanding ngSwitch)

Let's add a directive to our recipe book in the next section,

2:43

S… Speaker 2 (104. Understanding ngSwitch)

and then let's move on in the course.

2:45

S… Speaker 1 (104. Understanding ngSwitch)

See you there.

Kjo transkriptë është krijuar nga AI (njohje automatike e fjalimit). Mund të përmbajë gabime - verifiko me audion origjinale për përdorim kritik. Politika e AI

❤️ Love STT.ai? Tell your friends!

Përmbledhja

Kliko Përmbledhja për të gjeneruar një përmbledhje të AI të kësaj transkripte.

Pyet AI rreth kësaj transkripte

Pyet gjithçka rreth kësaj transkripte — AI do të gjejë pjesët e duhura dhe do të përgjigjet.

Transkripto një tjetër