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.

Бу транскрипция уйлап табылган (автомат сөйләм таныу) ярдәмендә ясалган. Анда хаталар булырга мөмкин - мөһим куллану өчен оригинал аудио белән тикшерегез. AI сәясәт

❤️ STT.aiне яратасызмы?

Тиздән

Бу терминның берничә мәгънәсе бар: Транссибирь тимер юлының Транссибирь бүлекчәсе

Бу транскрипция турында АА-дан сорагыз

Бу ысулның төп өстенлеге — ул җөмләнең эчтәлеген һәм аның эчтәлеген аңлатучы җөмләләрне аерып күрсәтә.

Башкасын күчерү