104. Understanding ngSwitch

Jul 15, 2026 01:01 · 2:49 · English · Whisper Turbo · 2 Relatori

Questa trascrizione scade oggi. Aggiornamento per l'immagazzinamento permanente →

Indice delle lezioni

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.

Questa trascrizione è stata generata dall'AI (riconoscimento automatico del linguaggio). Può contenere errori Politica dell'IA

❤️ Ti piace STT.ai? Diccelo ai tuoi amici!

Sommario

Fare clic su Summarize per generare un riepilogo AI di questa trascrizione.

Chiedi all'AI Informazioni su questo trascrizione

Chiedere qualsiasi cosa su questa trascrizione L'AI troverà sezioni pertinenti e la risposta.

Trascrivine un altro