94. ngFor and ngIf Recap

Jul 15, 2026 01:02 · 3:36 · English · Whisper Turbo · 2 સ્પીકર

આ ટ્રાન્સક્રિપ્ટ આજે સમાપ્ત થાય છે. કાયમી સંગ્રહ માટે સુધારો →

વાંચન અનુક્રમણિકા

0:02

S… Speaker 1 (94. ngFor and ngIf Recap)

I prepared a little project,

0:03

S… Speaker 1 (94. ngFor and ngIf Recap)

which you as always can find attached to this lecture here,

0:06

S… Speaker 1 (94. ngFor and ngIf Recap)

and it's a super simple project.

0:08

S… Speaker 1 (94. ngFor and ngIf Recap)

We got a button where we can toggle to only see odd

0:12

S… Speaker 1 (94. ngFor and ngIf Recap)

numbers, but right now we don't see any numbers,

0:14

S… Speaker 1 (94. ngFor and ngIf Recap)

because whilst I do have an array of numbers here in my AppComponent TypeScript

0:19

S… Speaker 1 (94. ngFor and ngIf Recap)

file,

0:19

S… Speaker 1 (94. ngFor and ngIf Recap)

I'm not outputting it here.

0:21

S… Speaker 1 (94. ngFor and ngIf Recap)

However, I did set up a list.

0:23

S… Speaker 1 (94. ngFor and ngIf Recap)

So with this,

0:25

S… Speaker 1 (94. ngFor and ngIf Recap)

why don't we go ahead and simply add ng4 with a

0:29

S… Speaker 1 (94. ngFor and ngIf Recap)

star since it is a structural directive to this list item.

0:32

S… Speaker 1 (94. ngFor and ngIf Recap)

And then we could simply say let number of

0:36

S… Speaker 1 (94. ngFor and ngIf Recap)

numbers.

0:37

S… Speaker 1 (94. ngFor and ngIf Recap)

We already learned this syntax.

0:39

S… Speaker 1 (94. ngFor and ngIf Recap)

And we could also extract the index if we wanted,

0:41

S… Speaker 1 (94. ngFor and ngIf Recap)

but we don't need that here.

0:43

S… Speaker 1 (94. ngFor and ngIf Recap)

So that is our single number and that of course allows it to now

0:47

S… Speaker 1 (94. ngFor and ngIf Recap)

output it here.

0:49

S… Speaker 1 (94. ngFor and ngIf Recap)

We can output it anywhere inside this element we

0:53

S… Speaker 1 (94. ngFor and ngIf Recap)

placed ng4 on.

0:54

S… Speaker 1 (94. ngFor and ngIf Recap)

So on any nested elements too.

0:56

S… Speaker 1 (94. ngFor and ngIf Recap)

With that we're outputting the number and now we see 1,

1:00

S… Speaker 1 (94. ngFor and ngIf Recap)

2, 3, 4, 5.

1:01

S… Speaker 1 (94. ngFor and ngIf Recap)

The button still doesn't do anything though.

1:04

S… Speaker 1 (94. ngFor and ngIf Recap)

The reason for this is that,

1:06

S… Speaker 1 (94. ngFor and ngIf Recap)

well right now we...

1:08

S… Speaker 1 (94. ngFor and ngIf Recap)

do something upon clicking,

1:10

S… Speaker 1 (94. ngFor and ngIf Recap)

we set only odd,

1:11

S… Speaker 1 (94. ngFor and ngIf Recap)

which is this property,

1:13

S… Speaker 1 (94. ngFor and ngIf Recap)

to what it currently is not.

1:15

S… Speaker 1 (94. ngFor and ngIf Recap)

So if it was false,

1:16

S… Speaker 1 (94. ngFor and ngIf Recap)

we set it to true and the other way around.

1:18

S… Speaker 1 (94. ngFor and ngIf Recap)

But we're not using this information.

1:20

S… Speaker 1 (94. ngFor and ngIf Recap)

Let's use it.

1:22

S… Speaker 1 (94. ngFor and ngIf Recap)

Now we could try placing ngif on the same element

1:26

S… Speaker 1 (94. ngFor and ngIf Recap)

we already have ng4 on and check if number

1:31

S… Speaker 1 (94. ngFor and ngIf Recap)

modulus, so the percentage sign two,

1:33

S… Speaker 1 (94. ngFor and ngIf Recap)

if that is equal to zero,

1:36

S… Speaker 1 (94. ngFor and ngIf Recap)

which would mean now we only display even elements,

1:40

S… Speaker 1 (94. ngFor and ngIf Recap)

right? If we do this,

1:42

S… Speaker 1 (94. ngFor and ngIf Recap)

we get an error because we can't have more than one structural directive

1:46

S… Speaker 1 (94. ngFor and ngIf Recap)

on the same element.

1:47

S… Speaker 1 (94. ngFor and ngIf Recap)

It just doesn't work.

1:48

S… Speaker 1 (94. ngFor and ngIf Recap)

But we don't need that.

1:50

S… Speaker 1 (94. ngFor and ngIf Recap)

We can change it differently.

1:52

S… Speaker 1 (94. ngFor and ngIf Recap)

We can simply make a tiny change to our main app here

1:56

S… Speaker 1 (94. ngFor and ngIf Recap)

and implement odd numbers.

2:01

S… Speaker 1 (94. ngFor and ngIf Recap)

which is 1,

2:02

S… Speaker 1 (94. ngFor and ngIf Recap)

3, and 5.

2:03

S… Speaker 1 (94. ngFor and ngIf Recap)

And then,

2:04

S… Speaker 1 (94. ngFor and ngIf Recap)

of course, even numbers.

2:06

S… Speaker 1 (94. ngFor and ngIf Recap)

And that is just a demo app for directives,

2:09

S… Speaker 1 (94. ngFor and ngIf Recap)

right? So that might not be the best solution for your app where you really need this

2:13

S… Speaker 1 (94. ngFor and ngIf Recap)

behavior.

2:13

S… Speaker 1 (94. ngFor and ngIf Recap)

Later in the pipe section,

2:15

S… Speaker 1 (94. ngFor and ngIf Recap)

you will learn how to dynamically filter an array,

2:17

S… Speaker 1 (94. ngFor and ngIf Recap)

for example.

2:18

S… Speaker 1 (94. ngFor and ngIf Recap)

So here,

2:19

S… Speaker 1 (94. ngFor and ngIf Recap)

even would be 2 and 4.

2:21

S… Speaker 2 (94. ngFor and ngIf Recap)

With that,

2:23

S… Speaker 1 (94. ngFor and ngIf Recap)

I'm going to comment out the first numbers array.

2:25

S… Speaker 1 (94. ngFor and ngIf Recap)

And instead here,

2:27

S… Speaker 1 (94. ngFor and ngIf Recap)

I'll loop through all my odd numbers.

2:31

S… Speaker 1 (94. ngFor and ngIf Recap)

And output odd here.

2:32

S… Speaker 1 (94. ngFor and ngIf Recap)

And of course we can do the same for the even numbers now.

2:36

S… Speaker 1 (94. ngFor and ngIf Recap)

So even of even numbers.

2:39

S… Speaker 1 (94. ngFor and ngIf Recap)

And now to display only one of the two,

2:43

S… Speaker 1 (94. ngFor and ngIf Recap)

we can simply wrap them in,

2:46

S… Speaker 1 (94. ngFor and ngIf Recap)

let's say,

2:46

S… Speaker 2 (94. ngFor and ngIf Recap)

a div.

2:48

S… Speaker 1 (94. ngFor and ngIf Recap)

So let's put the list item inside of the div.

2:51

S… Speaker 1 (94. ngFor and ngIf Recap)

And on the div,

2:53

S… Speaker 1 (94. ngFor and ngIf Recap)

we could place ngif.

2:54

S… Speaker 1 (94. ngFor and ngIf Recap)

And now the first one should only be displayed if only odd is true.

2:59

S… Speaker 1 (94. ngFor and ngIf Recap)

And let's do the same for the second one here.

3:01

S… Speaker 1 (94. ngFor and ngIf Recap)

Let's place them in here and we place ngf on that too

3:05

S… Speaker 1 (94. ngFor and ngIf Recap)

where we check if not only odd and maybe also replace even

3:10

S… Speaker 1 (94. ngFor and ngIf Recap)

here.

3:11

S… Speaker 1 (94. ngFor and ngIf Recap)

We now see we can toggle between the two lists.

3:13

S… Speaker 1 (94. ngFor and ngIf Recap)

So this is now working with ng4 and ngif.

3:16

S… Speaker 1 (94. ngFor and ngIf Recap)

Nothing new,

3:17

S… Speaker 1 (94. ngFor and ngIf Recap)

something we already learned.

3:18

S… Speaker 1 (94. ngFor and ngIf Recap)

So these are the two structural directives we learned about and how we may use them and

3:22

S… Speaker 1 (94. ngFor and ngIf Recap)

that you can't combine them on the same element.

3:24

S… Speaker 1 (94. ngFor and ngIf Recap)

Before we dive deeper into this,

3:26

S… Speaker 1 (94. ngFor and ngIf Recap)

let's also have a look at the two attribute

3:30

S… Speaker 1 (94. ngFor and ngIf Recap)

directives we learned thus far,

3:32

S… Speaker 1 (94. ngFor and ngIf Recap)

two of the most prominent ones.

આ ટ્રાન્સક્રિપ્ટ AI (આપોઆપ બોલવાની ઓળખ) દ્દારા બનાવેલ છે. ભૂલો સમાવી શકે છે - મહત્વપૂર્ણ વપરાશ માટે મૂળભૂત ઓડિયો સામે ચકાસો. AI નીતિ

❤️ STT.ai ને પ્રેમ કરો છો? તમારા મિત્રોને કહો!

સાર

આ ટ્રાન્સક્રિપ્ટના AI સારને ઉત્પન્ન કરવા માટે સારાંશ પર ક્લિક કરો.

આ ટ્રાન્સક્રિપ્ટ વિશે AI ને પૂછો

આ ટ્રાન્સક્રિપ્ટ વિશે કંઈપણ પૂછો - AI સંબંધિત વિભાગો શોધશે અને જવાબ આપશે.

બીજુ લખો