42_applying_css_classes_dynamically_with_ngclass

Jul 13, 2026 07:21 · 2:53 · English · Whisper Turbo · 2 _Gözleg

Bu transkripiň şu gün möhleti gutarýar. Daşyndan gaýd etmek üçin täzele →

Okap Bil

0:02

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

We saw examples for ng -style and ng -if.

0:05

S… Speaker 1 (42_applying_css_classes_dynamically_with_ngclass)

Now,

0:06

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

something related to ng -style is ng -class.

0:09

S… Speaker 1 (42_applying_css_classes_dynamically_with_ngclass)

Now,

0:10

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

we learned that ng -style allows us to dynamically assign a style.

0:14

S… Speaker 1 (42_applying_css_classes_dynamically_with_ngclass)

Now,

0:16

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

I will also add ng -class here.

0:18

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

And where ng -style allowed us to change the CSS style itself,

0:23

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

ng -class allows us to dynamically add or remove CSS classes.

0:28

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

So let's create such a class and for this I will first of all add

0:32

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

my styles here and I will use back

0:37

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

text to write this over multiple lines and I will give this a class name of online

0:41

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

in which case I want to color the text white.

0:45

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

So that's all I want to do because I think it's kind of hard to read the

0:49

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

black text on the green background.

0:51

S… Speaker 1 (42_applying_css_classes_dynamically_with_ngclass)

So back here,

0:53

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

ng class also,

0:55

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

this is the directive,

0:56

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

also only works as intended when using property binding.

0:59

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

So let's wrap it in square brackets too.

1:02

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

And here we also need to pass a JavaScript object.

1:05

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

And that's just the case for this property of this directive here,

1:09

S… Speaker 1 (42_applying_css_classes_dynamically_with_ngclass)

of course.

1:10

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

Each property you bind to may take a different value,

1:13

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

like disabled,

1:14

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

which took true or false.

1:15

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

So here it's a JavaScript object.

1:17

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

And for ng class,

1:19

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

this object works like this.

1:21

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

We also have key value pairs.

1:23

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

The keys are the CSS class names and the

1:27

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

values are the conditions determining whether this class should be attached

1:31

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

or not.

1:32

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

So here we have the online class.

1:34

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

You could also wrap this in single quotation marks if you had a class name with

1:39

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

a dash inside of it or something like this.

1:41

S… Speaker 1 (42_applying_css_classes_dynamically_with_ngclass)

And here,

1:42

S… Speaker 1 (42_applying_css_classes_dynamically_with_ngclass)

well,

1:43

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

I want to attach this only if the server is online.

1:48

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

So only if serverStatus equals

1:52

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

online.

1:53

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

Online here is a string between single quotation marks.

1:56

S… Speaker 1 (42_applying_css_classes_dynamically_with_ngclass)

Now,

1:57

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

of course, you could also outsource this in a method you call this serverStatus equals

2:01

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

online check,

2:02

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

but here I will write it inline.

2:04

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

So if this is online,

2:06

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

we should attach the CSS class online to this paragraph,

2:10

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

otherwise it should not get attached.

2:12

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

Let's view this in the running application.

2:14

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

Both are offline,

2:16

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

so none of the two should have the online CSS class

2:20

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

added to it,

2:21

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

and indeed...

2:22

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

I can't find the class on any of the two.

2:25

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

Now let's reload and hope that some of them is offline or online,

2:29

S… Speaker 1 (42_applying_css_classes_dynamically_with_ngclass)

excuse me.

2:29

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

Both are.

2:30

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

So let's check it.

2:31

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

Now we see the online class has been added actually

2:36

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

to both of them because this is how ng -class works.

2:39

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

It only adds a CSS class if a certain condition is

2:44

S… Speaker 1 (42_applying_css_classes_dynamically_with_ngclass)

true.

2:44

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

And that's an example for another built -in directive,

2:47

S… Speaker 2 (42_applying_css_classes_dynamically_with_ngclass)

another built -in attribute directive.

Bu transkript AI (otomat söz tanamak) tarapyndan emele getirildi. Hatalar bar bolup biler - örän möhüm ulanmak üçin ahyrky ses bilen deňle. AI düzgüni

❤️ STT.ai-i söýýäňmi? Dostlaryňa aýt

_Dürs

Bu transkripiň AI haýalnamasyny emele etmek üçin Çap et

Bu transkripsiýa hakda AI-den sora

Bu transkripsiýa hakda bir zat soraň — AI degişli bölümleri tapyp jogap berer.

Başgasyny _Çykar