46_getting_the_index_when_using_ngfor

Jul 13, 2026 07:21 · 2:52 · English · Whisper Turbo · 2 Sprekers

Dit transcript verloopt vandaag. Upgrade voor permanente opslag →

Lezingenindex

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.

Dit transcript werd gegenereerd door AI (automatische spraakherkenning). Kan fouten bevatten..verifieer tegen de oorspronkelijke audio voor kritisch gebruik. AI-beleid

❤️ Hou je van STT.ai? Vertel het je vrienden!

Samenvatting

Klik op Summarize om een AI samenvatting van dit transcript te genereren.

Vraag AI over dit Transcript

Vraag maar iets over dit transcript De AI zal relevante secties en antwoord vinden.

Een andere transcriberen