46_getting_the_index_when_using_ngfor

Jul 13, 2026 07:21 · 2:52 · English · Whisper Turbo · 2 ஒலிப்பேழைகள்

இந்த பதிவு இன்று காலாவதியாகிறது. நிலையான சேமிப்புக்காக மேம்படுத்தல் →

0:02

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

In the last assignment we created this solution with

0:06

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

our log here where we could add items which get an

0:10

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

incrementing number and this number then determines whether we have

0:14

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

a background color which is blue or this white text CSS

0:19

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

class attached to it.

0:20

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

Now in the assignment I said that it is one option to

0:24

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

use an incrementing number in our log.

0:26

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

Another option might be to use any other.

0:30

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

Content for example a timestamp,

0:33

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

but it could be any other text.

0:34

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

So first of all change this Here in my app

0:38

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

component typescript file that will no longer push this

0:43

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

number

0:45

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

Instead, I will use the timestamp here,

0:47

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

which we can get with new date.

0:49

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

Date is a built -in object JavaScript ships with,

0:52

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

so there is no need to add any import.

0:55

S… Speaker 2 (46_getting_the_index_when_using_ngfor)

Now with that,

0:56

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

we're pushing new timestamps on this array.

0:58

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

Can demonstrate this with ng -surf running by simply clicking this

1:02

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

button here.

1:03

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

But now everything is blue,

1:05

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

of course, because our check here now always returns true

1:09

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

because a string,

1:10

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

and this is just a string,

1:11

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

is always deemed as being greater than five.

1:15

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

So our check doesn't work anymore.

1:17

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

We can add something to ng4 here too.

1:21

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

Separated with a semicolon,

1:23

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

you can extract some extra information.

1:27

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

The current index or the index of

1:31

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

the current iteration.

1:32

S… Speaker 2 (46_getting_the_index_when_using_ngfor)

With let,

1:34

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

you can bind it to any variable name of your choice,

1:37

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

like i or index,

1:39

S… Speaker 2 (46_getting_the_index_when_using_ngfor)

whatever you like.

1:39

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

I will set it to i.

1:42

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

And then you set equal to index.

1:44

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

Now equal to index kind of is also like a reserved

1:49

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

expression,

1:49

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

you could say.

1:50

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

It gives you access to the index of the current iteration.

1:53

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

So in the first loop,

1:55

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

this will be zero.

1:56

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

In the second loop,

1:58

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

so in the second element in this array,

1:59

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

i will be one and so on.

2:02

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

Now with this information,

2:03

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

you can of course update your solution here to no longer check

2:07

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

if log item is greater or equal than five.

2:10

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

but if i is greater or equal than four,

2:13

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

because remember,

2:14

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

the index starts at zero.

2:16

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

So let's update both checks like this.

2:19

S… Speaker 2 (46_getting_the_index_when_using_ngfor)

And now with that,

2:21

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

this should work with any content and not just with incrementing numbers.

2:25

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

This looks pretty good.

2:27

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

So that's a tiny addition.

2:30

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

extracting the index of ng4 just like that.

2:34

S… Speaker 2 (46_getting_the_index_when_using_ngfor)

With that,

2:35

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

enough about the basics.

2:37

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

We got a lot of solid knowledge right now.

2:40

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

Let's use it to set up our course project in the next

2:44

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

section before we then dive deeper into components and data

2:48

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

binding.

2:48

S… Speaker 1 (46_getting_the_index_when_using_ngfor)

Can't wait to see you there.

இந்த ஒலிப்பதிவு AI (தானியங்கி பேச்சு அடையாளம்) மூலம் உருவாக்கப்பட்டது. பிழைகள் இருக்கலாம் - முக்கியமான பயன்பாட்டுக்கு மூல ஒலியை சரிபார்க்கவும். AI கொள்கை

❤️ STT.ai ஐ நேசிக்கிறீர்களா? உங்கள் நண்பர்களுக்குச் சொல்லுங்கள்!

சுருக்கம்

இந்த நகலெடுப்புக்கான AI சுருக்கத்தை உருவாக்க சுருக்கம் என்பதை க்ளிக் செய்யவும்.

இந்த நகலை AI க்குக் கேட்கவும்

இந்த நூலைப் பற்றி ஏதாவது கேட்கவும் - AI தொடர்புடைய பகுதிகளைக் கண்டுபிடித்து பதிலளிக்கும்.

மற்றொன்றை மாற்று