95. ngClass and ngStyle Recap

Jul 15, 2026 01:02 · 2:57 · English · Whisper Turbo · 2 स्पीकर

इस हस्तलिपि का समय आज बीत चुका है. स्थायी भंडारण के लिए अद्यतन करें →

0:02

S… Speaker 1 (95. ngClass and ngStyle Recap)

There are of course many attribute directives and throughout this course we will see different

0:06

S… Speaker 1 (95. ngClass and ngStyle Recap)

ones.

0:07

S… Speaker 1 (95. ngClass and ngStyle Recap)

Two we already learned about are ng class and ng style.

0:10

S… Speaker 1 (95. ngClass and ngStyle Recap)

Now just to quickly refresh how they work,

0:14

S… Speaker 1 (95. ngClass and ngStyle Recap)

let's add a class to our CSS file here.

0:17

S… Speaker 1 (95. ngClass and ngStyle Recap)

Let's maybe name it odd.

0:19

S… Speaker 1 (95. ngClass and ngStyle Recap)

And here I simply want to set the color to red.

0:26

S… Speaker 1 (95. ngClass and ngStyle Recap)

Now in my template,

0:27

S… Speaker 1 (95. ngClass and ngStyle Recap)

I want to assign this class if it is odd.

0:30

S… Speaker 2 (95. ngClass and ngStyle Recap)

So here,

0:31

S… Speaker 1 (95. ngClass and ngStyle Recap)

of course, I could always assign the class,

0:34

S… Speaker 1 (95. ngClass and ngStyle Recap)

since we already make sure that this list item list is only displayed if

0:38

S… Speaker 2 (95. ngClass and ngStyle Recap)

only odd is checked.

0:40

S… Speaker 2 (95. ngClass and ngStyle Recap)

Still,

0:41

S… Speaker 1 (95. ngClass and ngStyle Recap)

we could also use ng class here,

0:43

S… Speaker 1 (95. ngClass and ngStyle Recap)

like this,

0:44

S… Speaker 1 (95. ngClass and ngStyle Recap)

and make sure that we assign the odd CSS class,

0:48

S… Speaker 1 (95. ngClass and ngStyle Recap)

therefore we define it here as a property name,

0:51

S… Speaker 1 (95. ngClass and ngStyle Recap)

only if the number we currently look at

0:54

S… Speaker 1 (95. ngClass and ngStyle Recap)

divided by two with the modulus sign equals something

0:58

S… Speaker 1 (95. ngClass and ngStyle Recap)

else than zero.

1:00

S… Speaker 1 (95. ngClass and ngStyle Recap)

So not equal to zero.

1:02

S… Speaker 1 (95. ngClass and ngStyle Recap)

That means we have a remainder for this division,

1:05

S… Speaker 2 (95. ngClass and ngStyle Recap)

which means it's odd.

1:06

S… Speaker 1 (95. ngClass and ngStyle Recap)

Now we can copy this to the even.

1:10

S… Speaker 1 (95. ngClass and ngStyle Recap)

And again,

1:11

S… Speaker 1 (95. ngClass and ngStyle Recap)

I know that this will never be odd here because we already make sure that this

1:15

S… Speaker 1 (95. ngClass and ngStyle Recap)

is only rendered if we are not displaying odd items.

1:18

S… Speaker 1 (95. ngClass and ngStyle Recap)

We don't have any odd items in the even numbers array.

1:21

S… Speaker 2 (95. ngClass and ngStyle Recap)

So just to show how this works,

1:23

S… Speaker 1 (95. ngClass and ngStyle Recap)

of course we have to check even here.

1:26

S… Speaker 1 (95. ngClass and ngStyle Recap)

Now you see,

1:27

S… Speaker 1 (95. ngClass and ngStyle Recap)

even numbers are black,

1:29

S… Speaker 1 (95. ngClass and ngStyle Recap)

odd numbers are red.

1:31

S… Speaker 1 (95. ngClass and ngStyle Recap)

Again, not super surprising,

1:33

S… Speaker 1 (95. ngClass and ngStyle Recap)

but just a brief refresher on how ng -class worked.

1:36

S… Speaker 1 (95. ngClass and ngStyle Recap)

And important,

1:37

S… Speaker 1 (95. ngClass and ngStyle Recap)

I mentioned it before,

1:38

S… Speaker 1 (95. ngClass and ngStyle Recap)

the squared brackets here indicate that we are binding to some property

1:42

S… Speaker 1 (95. ngClass and ngStyle Recap)

on our ng -class directive.

1:44

S… Speaker 1 (95. ngClass and ngStyle Recap)

Now ng -style was the other...

1:49

S… Speaker 1 (95. ngClass and ngStyle Recap)

famous directive we had a look at thus far.

1:51

S… Speaker 1 (95. ngClass and ngStyle Recap)

ng -style allows us to also pass an object

1:55

S… Speaker 1 (95. ngClass and ngStyle Recap)

to some property,

1:56

S… Speaker 1 (95. ngClass and ngStyle Recap)

which is also named ng -style on the same directive.

1:59

S… Speaker 1 (95. ngClass and ngStyle Recap)

And here we could simply set the background

2:04

S… Speaker 1 (95. ngClass and ngStyle Recap)

color.

2:06

S… Speaker 2 (95. ngClass and ngStyle Recap)

And we could set it to red like this.

2:08

S… Speaker 2 (95. ngClass and ngStyle Recap)

Now, it would always be red.

2:09

S… Speaker 2 (95. ngClass and ngStyle Recap)

But of course,

2:10

S… Speaker 1 (95. ngClass and ngStyle Recap)

we can also set a dynamic value here.

2:12

S… Speaker 1 (95. ngClass and ngStyle Recap)

So we could simply repeat our check from up here if it's an odd number.

2:16

S… Speaker 2 (95. ngClass and ngStyle Recap)

In which case,

2:17

S… Speaker 1 (95. ngClass and ngStyle Recap)

I want to give this,

2:21

S… Speaker 2 (95. ngClass and ngStyle Recap)

let's say,

2:22

S… Speaker 1 (95. ngClass and ngStyle Recap)

background color of yellow.

2:25

S… Speaker 2 (95. ngClass and ngStyle Recap)

Otherwise,

2:26

S… Speaker 1 (95. ngClass and ngStyle Recap)

it's transparent.

2:29

S… Speaker 1 (95. ngClass and ngStyle Recap)

Now I'll quickly copy this over to our other list.

2:33

S… Speaker 2 (95. ngClass and ngStyle Recap)

Here, of course,

2:34

S… Speaker 1 (95. ngClass and ngStyle Recap)

I check if even is basically even.

2:36

S… Speaker 1 (95. ngClass and ngStyle Recap)

And guess what?

2:37

S… Speaker 1 (95. ngClass and ngStyle Recap)

I think it will be.

2:38

S… Speaker 1 (95. ngClass and ngStyle Recap)

And now the even numbers,

2:40

S… Speaker 2 (95. ngClass and ngStyle Recap)

still no styling at all.

2:41

S… Speaker 1 (95. ngClass and ngStyle Recap)

And the odd numbers are really ugly now,

2:44

S… Speaker 1 (95. ngClass and ngStyle Recap)

to be honest.

2:44

S… Speaker 1 (95. ngClass and ngStyle Recap)

But that means our directors here are working.

2:48

S… Speaker 1 (95. ngClass and ngStyle Recap)

Now let's build our own ones because that is something we can do too.

2:51

S… Speaker 1 (95. ngClass and ngStyle Recap)

Let's start with our own attribute directive.

यह व्याख्या एआई (अंग्रेजी भाषा की पहचान के द्वारा तैयार की गयी थी ।) एआई नीति

❤️ क्या आपको STT.ai पसंद है? अपने दोस्तों को बताइए!

सारांश

इस बुक का एआई सारांश बनाने के लिए सार बनाने के लिए सार को क्लिक करें.

एआई के बारे में पूछें इस ट्रांसमिशन के बारे में

इस हस्तलिपि के बारे में कुछ सवाल पूछिए — एआई को ज़रूरी भागों और जवाब मिलेगा ।

एक और अनुवाद