42_applying_css_classes_dynamically_with_ngclass

Jul 13, 2026 07:21 · 2:53 · English · Whisper Turbo · 2 Mpitondra teny

Tapitra androany ity dika mitovy ity. Handefa ny rakitra ho any amin'ny toerana tsy miova →

Fisokajin'ny laha-tahiry

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.

IA (fifandraisana amin'ny feo) no namorona ity dika mitovin'ny soratra ity. Mety misy tsy fetezana - jereo ny feo voalohany raha mila ampiasaina amin'ny fomba henjana. Politikan'ny AI

Tianao ve ny STT.ai? Lazao amin'ny namanao!

Famintinana

Tsindrio ny Famaritana mba hamoronana famintinana AI an'ity dika mitovy ity.

Manontany ny AI momba ity dika mitovy ity

Manontany zavatra momba ity dika mitovy ity — hahita ny ampahany mifandraika amin'izany ny AI ary hamaly.

Adikao ny hafa