43_outputting_lists_with_ngfor

Jul 13, 2026 07:21 · 3:43 · English · Whisper Turbo · 2 Wasemaji

Rekodi hiyo yamalizika leo. Kufugwa kwa ajili ya uhifadhi wa kudumu →

Index YA TAA

0:02

S… Speaker 2 (43_outputting_lists_with_ngfor)

With all these directives learned,

0:05

S… Speaker 2 (43_outputting_lists_with_ngfor)

let's now have a look at the last built -in directive for now.

0:09

S… Speaker 2 (43_outputting_lists_with_ngfor)

An important one,

0:10

S… Speaker 2 (43_outputting_lists_with_ngfor)

though. It's sad that we can click the Add Server

0:14

S… Speaker 2 (43_outputting_lists_with_ngfor)

button, but we don't actually add servers to our list here,

0:18

S… Speaker 2 (43_outputting_lists_with_ngfor)

right? This list doesn't grow.

0:21

S… Speaker 2 (43_outputting_lists_with_ngfor)

This list is totally static.

0:22

S… Speaker 2 (43_outputting_lists_with_ngfor)

We can change this with the ng4 directive.

0:27

S… Speaker 2 (43_outputting_lists_with_ngfor)

So let's have a look at how it works.

0:29

S… Speaker 2 (43_outputting_lists_with_ngfor)

In our service component here,

0:32

S… Speaker 2 (43_outputting_lists_with_ngfor)

we right now manually add our app server component

0:36

S… Speaker 1 (43_outputting_lists_with_ngfor)

twice.

0:36

S… Speaker 2 (43_outputting_lists_with_ngfor)

It would be nicer to have an array of servers

0:41

S… Speaker 2 (43_outputting_lists_with_ngfor)

which adds it dynamically.

0:42

S… Speaker 2 (43_outputting_lists_with_ngfor)

So in the servers component here,

0:45

S… Speaker 2 (43_outputting_lists_with_ngfor)

I'll add a new property,

0:46

S… Speaker 1 (43_outputting_lists_with_ngfor)

servers,

0:47

S… Speaker 2 (43_outputting_lists_with_ngfor)

and this is an array.

0:49

S… Speaker 2 (43_outputting_lists_with_ngfor)

And here I could have my test server

0:53

S… Speaker 2 (43_outputting_lists_with_ngfor)

and my test server

0:58

S… Speaker 2 (43_outputting_lists_with_ngfor)

too maybe.

0:59

S… Speaker 2 (43_outputting_lists_with_ngfor)

And when we create a new server here,

1:03

S… Speaker 2 (43_outputting_lists_with_ngfor)

I actually want to access this array of servers and

1:07

S… Speaker 2 (43_outputting_lists_with_ngfor)

push a new server on it.

1:10

S… Speaker 2 (43_outputting_lists_with_ngfor)

And this should of course use the server name I set

1:14

S… Speaker 2 (43_outputting_lists_with_ngfor)

up. Now with this,

1:16

S… Speaker 2 (43_outputting_lists_with_ngfor)

I have an array of servers.

1:19

S… Speaker 2 (43_outputting_lists_with_ngfor)

It would now be great if we could replicate the app server

1:23

S… Speaker 2 (43_outputting_lists_with_ngfor)

component as often as needed to have a server for

1:27

S… Speaker 1 (43_outputting_lists_with_ngfor)

each element in the array.

1:28

S… Speaker 2 (43_outputting_lists_with_ngfor)

So two initially and then a new one for each server we add.

1:32

S… Speaker 2 (43_outputting_lists_with_ngfor)

We can do this.

1:33

S… Speaker 2 (43_outputting_lists_with_ngfor)

I'll get rid of the second app server here.

1:36

S… Speaker 2 (43_outputting_lists_with_ngfor)

And on the first one,

1:38

S… Speaker 2 (43_outputting_lists_with_ngfor)

I will place another directive with a star because this is now also a structural

1:42

S… Speaker 2 (43_outputting_lists_with_ngfor)

directive changing the DOM itself.

1:44

S… Speaker 2 (43_outputting_lists_with_ngfor)

It's the ng4 directive.

1:47

S… Speaker 2 (43_outputting_lists_with_ngfor)

The ng4 base syntax looks like

1:51

S… Speaker 1 (43_outputting_lists_with_ngfor)

this.

1:51

S… Speaker 2 (43_outputting_lists_with_ngfor)

We define a temporary variable for inside a

1:55

S… Speaker 1 (43_outputting_lists_with_ngfor)

loop with let.

1:56

S… Speaker 2 (43_outputting_lists_with_ngfor)

Give it any name you like,

1:58

S… Speaker 2 (43_outputting_lists_with_ngfor)

like server,

1:59

S… Speaker 1 (43_outputting_lists_with_ngfor)

for example.

2:01

S… Speaker 2 (43_outputting_lists_with_ngfor)

And then off servers.

2:05

S… Speaker 2 (43_outputting_lists_with_ngfor)

Servers here is the property we defined in the TypeScript file.

2:10

S… Speaker 2 (43_outputting_lists_with_ngfor)

And this will now loop through all elements in this array and

2:14

S… Speaker 2 (43_outputting_lists_with_ngfor)

assign the individual element to this dynamic server variable.

2:17

S… Speaker 2 (43_outputting_lists_with_ngfor)

So that's just like you might know this loop from a normal,

2:21

S… Speaker 1 (43_outputting_lists_with_ngfor)

well,

2:22

S… Speaker 1 (43_outputting_lists_with_ngfor)

JavaScript code,

2:23

S… Speaker 1 (43_outputting_lists_with_ngfor)

the for -off loop.

2:24

S… Speaker 2 (43_outputting_lists_with_ngfor)

This server variable can now be used in the

2:28

S… Speaker 1 (43_outputting_lists_with_ngfor)

template.

2:28

S… Speaker 2 (43_outputting_lists_with_ngfor)

But here we don't really need it,

2:31

S… Speaker 1 (43_outputting_lists_with_ngfor)

to be honest.

2:32

S… Speaker 2 (43_outputting_lists_with_ngfor)

We will soon learn in the next course section how

2:37

S… Speaker 2 (43_outputting_lists_with_ngfor)

we can pass data to our own components to output it there.

2:40

S… Speaker 2 (43_outputting_lists_with_ngfor)

So for now,

2:41

S… Speaker 2 (43_outputting_lists_with_ngfor)

we won't need that.

2:43

S… Speaker 2 (43_outputting_lists_with_ngfor)

But one thing we should see is that if I save this and we go back to

2:47

S… Speaker 2 (43_outputting_lists_with_ngfor)

our application,

2:48

S… Speaker 2 (43_outputting_lists_with_ngfor)

we still see two because we start with two.

2:50

S… Speaker 2 (43_outputting_lists_with_ngfor)

But if I add more servers,

2:52

S… Speaker 2 (43_outputting_lists_with_ngfor)

you see our list grows and we can click

2:56

S… Speaker 2 (43_outputting_lists_with_ngfor)

this as often as we want.

2:58

S… Speaker 2 (43_outputting_lists_with_ngfor)

Of course, the content of the individual server is still static

3:03

S… Speaker 2 (43_outputting_lists_with_ngfor)

because we can't pass the data like the server

3:07

S… Speaker 2 (43_outputting_lists_with_ngfor)

name to that component.

3:09

S… Speaker 2 (43_outputting_lists_with_ngfor)

But that is something we will learn in the next course section when we dive

3:13

S… Speaker 2 (43_outputting_lists_with_ngfor)

deeper into components and we will learn how we can create our own

3:17

S… Speaker 2 (43_outputting_lists_with_ngfor)

properties on components.

3:19

S… Speaker 2 (43_outputting_lists_with_ngfor)

We can then set from outside a feature which would be great

3:23

S… Speaker 1 (43_outputting_lists_with_ngfor)

to have here.

3:24

S… Speaker 2 (43_outputting_lists_with_ngfor)

So let's dive into this in the next course section.

3:27

S… Speaker 2 (43_outputting_lists_with_ngfor)

Before doing so though,

3:28

S… Speaker 2 (43_outputting_lists_with_ngfor)

let's practice the things we learned in the last lectures and

3:33

S… Speaker 2 (43_outputting_lists_with_ngfor)

then let's also set up our course project.

3:36

S… Speaker 2 (43_outputting_lists_with_ngfor)

before we then dive deeper into components and data binding again.

3:39

S… Speaker 1 (43_outputting_lists_with_ngfor)

So,

3:40

S… Speaker 1 (43_outputting_lists_with_ngfor)

see you there!

Nakala hii ilitokezwa na AI (utambuaji wa usemi wa kiaya). Inaweza kuwa na makosa Équipe dhidi ya sauti ya awali kwa utumizi wa kuchambua. Sera ya AI

❤️ Love STT.ai? Tell your friends!

Muhtasari

Bonyeza muhtasari ili kutokeza muhtasari wa AI juu ya nakala hii.

Uliza Maswali Kuhusu Mpito Huu

Uliza jambo lolote kuhusu nakala hii ya kitabu KULEA ile nitakayopata sehemu zinazofaa na majibu.

Trekta Nyingine