104. Understanding ngSwitch

Jul 15, 2026 01:01 · 2:49 · English · Whisper Turbo · 2 Høyttalere
Denne utskriften utløper i dag. Oppgradering for permanent lagring →
Øvelsesindeks
Viser bare
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)
5.
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.

Denne utskrifta ble laget av AI (automatisk talegjenkjenning). Kan inneholde feil – sjekk mot den opprinnelige lyden for kritisk bruk. AI- praksis

❤️ Elsker du STT.ai? Fortell vennene dine!
Sammendrag
Trykk Summarize for å lage et AI- sammendrag av denne utskrifta.
Summarerer...
Spør AI om dette transkriptet
Spør noe om denne utskrifta – AI- en vil finne relevante avsnitt og svar.
Abonner på en annen