124. Using Services for Pushing Data from A to B

Jul 15, 2026 05:15 · 3:08 · English · Whisper Turbo · 2 Speaker

Transkrip ini tamat tempoh hari ini. Naik taraf untuk storan kekal →

Indeks Bacaan

0:02

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

In the last lecture,

0:03

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

we basically finished our shopping list service,

0:05

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

but here's one thing which is not working.

0:08

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

I can click this Add button as often as I want.

0:11

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

I don't get an error,

0:12

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

but I also don't see it getting added to this list.

0:15

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

The reason for this is that when

0:19

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

we call Get Ingredients,

0:21

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

which we of course do to populate this list,

0:24

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

we only get a slice of the ingredients array,

0:27

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

so we get a copy.

0:29

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

Therefore, once we add a new ingredient,

0:31

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

which you of course don't add to the copy but to the original array,

0:35

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

that is not reflected in our components where we only have that

0:39

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

copy to work with.

0:40

S… Speaker 2 (124. Using Services for Pushing Data from A to B)

Now,

0:42

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

there are a couple of ways of solving this.

0:44

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

For the easiest solution,

0:46

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

you could remove slice and that's not necessarily bad.

0:49

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

You would then simply return the original array.

0:52

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

And if you are sure you don't accidentally edit it somewhere,

0:56

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

this might not be wrong.

0:58

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

I choose this approach here,

1:00

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

though, because I want to show you a different solution.

1:03

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

We basically have to inform our component

1:07

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

that new data is available.

1:09

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

So I will simply add a new event

1:13

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

emitter here,

1:14

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

and I'll name it ingredients changed,

1:18

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

and I'll set this to,

1:20

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

or I'll,

1:21

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

of course, set this to a new event emitter to be imported from at

1:25

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

AngularCore.

1:26

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

This event emitter now,

1:29

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

can emit our ingredient array.

1:33

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

So the type it will pass on is an array of ingredients.

1:36

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

And now here,

1:38

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

whenever we change this array,

1:40

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

we simply call this ingredients changed and

1:45

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

emit a new event.

1:47

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

And we of course pass a value here,

1:51

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

our original ingredients array,

1:53

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

though to be precise,

1:55

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

again, only a copy of it.

1:58

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

So now we always have the right ingredients

2:02

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

array in the service and we inform other interested

2:06

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

components about that change in the event we're emitting here.

2:10

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

So now in the shopping list component,

2:13

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

besides getting the ingredients at that point of time we load

2:17

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

the app,

2:18

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

I also want to reach out to my shopping list service and

2:22

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

simply subscribe to that ingredients changed event.

2:27

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

So now whenever ingredients change,

2:29

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

I know that I will get them.

2:31

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

This will be of type ingredient array here as we learned.

2:34

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

And now I can use them here in the body of this anonymous function

2:39

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

I'm passing to subscribe.

2:40

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

And here I can now simply set this

2:44

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

ingredients equal to the ingredients I got here.

2:48

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

And with this change in place,

2:50

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

now if we let the application reload here

2:54

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

and go to shopping list and now I add bread and

2:58

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

now you see it gets added here again without any issues because

3:03

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

now we're getting informed that something changed.

Transkripsi ini dijana oleh AI (pengenalan percakapan automatik). Mungkin mengandungi ralat - semak dengan audio asal untuk penggunaan kritikal. Polisi AI

❤️ Love STT.ai? Tell your friends!

Ringkasan

Klik Ringkasan untuk mencipta ringkasan AI transkripsi ini.

Tanya AI Tentang Transkrip Ini

Tanya apa-apa tentang transkripsi ini — AI akan cari bahagian yang berkaitan dan menjawab.

Tulis Semula Lain