46_getting_the_index_when_using_ngfor

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

Den här utskriften går ut idag. Uppgradering för permanent lagring →

Föreläsningsindex

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.

Denna utskrift genererades av AI (automatisk taligenkänning). Kan innehålla fel — verifiera mot originalljudet för kritisk användning. Politik för AI

❤️ Älskar du STT.ai? Berätta för dina vänner!

Sammanfattning

Klicka på Summarize för att generera en AI sammanfattning av denna utskrift.

Fråga AI om detta Transcript

Fråga något om denna utskrift — AI kommer att hitta relevanta avsnitt och svar.

Skriv om en annan