123. Adding the Shopping List Service

Jul 15, 2026 05:15 · 5:04 · English · Whisper Turbo · 2 Konekte

Transkript sa a ekspire jodi a. Ajoutè pou depo perpétuel →

Endèks lekti

0:02

S… Speaker 1 (123. Adding the Shopping List Service)

So in the last lectures,

0:03

S… Speaker 2 (123. Adding the Shopping List Service)

we improved our recipe section a lot with the service.

0:07

S… Speaker 2 (123. Adding the Shopping List Service)

Now let's work on the shopping list side,

0:10

S… Speaker 2 (123. Adding the Shopping List Service)

on the shopping list service.

0:12

S… Speaker 2 (123. Adding the Shopping List Service)

This service is empty right now.

0:14

S… Speaker 2 (123. Adding the Shopping List Service)

Now here's your challenge.

0:16

S… Speaker 1 (123. Adding the Shopping List Service)

Fill it with some life.

0:18

S… Speaker 2 (123. Adding the Shopping List Service)

It would be nice if this service could manage our shopping

0:23

S… Speaker 2 (123. Adding the Shopping List Service)

list, so our list of ingredients.

0:24

S… Speaker 2 (123. Adding the Shopping List Service)

Maybe you even add the add ingredient method here

0:28

S… Speaker 2 (123. Adding the Shopping List Service)

so that you can add ingredients using this service too.

0:31

S… Speaker 2 (123. Adding the Shopping List Service)

We already got this add functionality here in the shopping list component.

0:35

S… Speaker 2 (123. Adding the Shopping List Service)

It shouldn't live here anymore though.

0:38

S… Speaker 1 (123. Adding the Shopping List Service)

And with that,

0:40

S… Speaker 1 (123. Adding the Shopping List Service)

we would take a huge step forward.

0:42

S… Speaker 2 (123. Adding the Shopping List Service)

So your chance to pause the video and try this on your own,

0:45

S… Speaker 1 (123. Adding the Shopping List Service)

thereafter we'll solve it together.

0:50

S… Speaker 1 (123. Adding the Shopping List Service)

So, were you successful?

0:51

S… Speaker 2 (123. Adding the Shopping List Service)

Let's fill this shopping list service with some life.

0:55

S… Speaker 1 (123. Adding the Shopping List Service)

For this,

0:57

S… Speaker 2 (123. Adding the Shopping List Service)

I'll first of all copy my ingredients here and add it here as

1:01

S… Speaker 1 (123. Adding the Shopping List Service)

a property to the service.

1:02

S… Speaker 1 (123. Adding the Shopping List Service)

And of course,

1:03

S… Speaker 2 (123. Adding the Shopping List Service)

I need to import ingredient from the shared folder from the ingredient model

1:07

S… Speaker 1 (123. Adding the Shopping List Service)

there. Now with that,

1:09

S… Speaker 2 (123. Adding the Shopping List Service)

we got the data in here and I will make this private.

1:13

S… Speaker 2 (123. Adding the Shopping List Service)

Now, just like in the shopping,

1:15

S… Speaker 2 (123. Adding the Shopping List Service)

excuse me, in the recipe service,

1:17

S… Speaker 2 (123. Adding the Shopping List Service)

I will add a get ingredients method here

1:21

S… Speaker 2 (123. Adding the Shopping List Service)

where I will return my ingredients,

1:24

S… Speaker 2 (123. Adding the Shopping List Service)

but only a copy of it with the slice method so

1:28

S… Speaker 2 (123. Adding the Shopping List Service)

that I can't access the original array stored in the service.

1:32

S… Speaker 1 (123. Adding the Shopping List Service)

With that,

1:34

S… Speaker 2 (123. Adding the Shopping List Service)

I can go back to my shopping list component and I will set this to an

1:39

S… Speaker 2 (123. Adding the Shopping List Service)

uninitialized property.

1:41

S… Speaker 2 (123. Adding the Shopping List Service)

But I can inject my shopping list service.

1:45

S… Speaker 2 (123. Adding the Shopping List Service)

Now again the question is where should we provide it?

1:48

S… Speaker 2 (123. Adding the Shopping List Service)

Now for now we can provide it here

1:52

S… Speaker 2 (123. Adding the Shopping List Service)

in the shopping list component and therefore it would also be available in

1:57

S… Speaker 2 (123. Adding the Shopping List Service)

the shopping edit component.

1:58

S… Speaker 2 (123. Adding the Shopping List Service)

But actually later I also want to access it

2:02

S… Speaker 2 (123. Adding the Shopping List Service)

from my recipe section.

2:03

S… Speaker 2 (123. Adding the Shopping List Service)

That is why I will actually provide it an app module

2:08

S… Speaker 2 (123. Adding the Shopping List Service)

and here

2:10

S… Speaker 2 (123. Adding the Shopping List Service)

I will add it to this provider's array,

2:13

S… Speaker 2 (123. Adding the Shopping List Service)

therefore, shopping list service.

2:16

S… Speaker 2 (123. Adding the Shopping List Service)

Make sure to also add the import at the top here.

2:20

S… Speaker 2 (123. Adding the Shopping List Service)

So now we will be able to use the service application

2:24

S… Speaker 2 (123. Adding the Shopping List Service)

-wide, including in other services.

2:26

S… Speaker 2 (123. Adding the Shopping List Service)

And I exactly need this behavior because we will soon use

2:31

S… Speaker 2 (123. Adding the Shopping List Service)

it in another service.

2:33

S… Speaker 2 (123. Adding the Shopping List Service)

So back to the shopping list component then.

2:35

S… Speaker 2 (123. Adding the Shopping List Service)

We can now inject the shopping list service and I'll

2:39

S… Speaker 2 (123. Adding the Shopping List Service)

bind it to a property named sl service.

2:42

S… Speaker 2 (123. Adding the Shopping List Service)

Of course you can choose a different name which will be of type shopping list

2:46

S… Speaker 2 (123. Adding the Shopping List Service)

service and you need to add the import pointing to the shopping list dot

2:50

S… Speaker 2 (123. Adding the Shopping List Service)

service file.

2:52

S… Speaker 2 (123. Adding the Shopping List Service)

With that in ngOnInit,

2:54

S… Speaker 2 (123. Adding the Shopping List Service)

because you should do all tasks which require a bit more heavy

2:58

S… Speaker 1 (123. Adding the Shopping List Service)

lifting or in general,

2:59

S… Speaker 2 (123. Adding the Shopping List Service)

as I could practice all initializations in ngOnInit,

3:04

S… Speaker 1 (123. Adding the Shopping List Service)

therefore here,

3:05

S… Speaker 2 (123. Adding the Shopping List Service)

I will simply assign my ingredients to whatever the

3:09

S… Speaker 2 (123. Adding the Shopping List Service)

shopping list service returns me if I call get ingredients

3:13

S… Speaker 1 (123. Adding the Shopping List Service)

here.

3:14

S… Speaker 1 (123. Adding the Shopping List Service)

With this in place,

3:16

S… Speaker 2 (123. Adding the Shopping List Service)

if we save this and we go to the shopping list area,

3:19

S… Speaker 1 (123. Adding the Shopping List Service)

this is still working,

3:20

S… Speaker 1 (123. Adding the Shopping List Service)

so that's great.

3:21

S… Speaker 2 (123. Adding the Shopping List Service)

Now let's make sure that we can also add items.

3:24

S… Speaker 2 (123. Adding the Shopping List Service)

So I'll add the add ingredient method

3:28

S… Speaker 1 (123. Adding the Shopping List Service)

here.

3:31

S… Speaker 2 (123. Adding the Shopping List Service)

And I know that I will receive an ingredient here

3:35

S… Speaker 2 (123. Adding the Shopping List Service)

of type ingredient.

3:36

S… Speaker 2 (123. Adding the Shopping List Service)

And all I want to do then is I want to access my ingredients

3:40

S… Speaker 2 (123. Adding the Shopping List Service)

and push this new ingredient on it.

3:43

S… Speaker 1 (123. Adding the Shopping List Service)

So here,

3:44

S… Speaker 2 (123. Adding the Shopping List Service)

ingredient.

3:47

S… Speaker 2 (123. Adding the Shopping List Service)

Now if we go to the shopping added component,

3:50

S… Speaker 2 (123. Adding the Shopping List Service)

right now we're emitting an event with our own ingredient.

3:54

S… Speaker 2 (123. Adding the Shopping List Service)

We no longer need to do this so we can get rid of the event

3:59

S… Speaker 2 (123. Adding the Shopping List Service)

of output and of the imports here related to this.

4:01

S… Speaker 2 (123. Adding the Shopping List Service)

We can also go to the shopping list component HTML file and

4:06

S… Speaker 2 (123. Adding the Shopping List Service)

remove our listener where we listened to this event.

4:09

S… Speaker 2 (123. Adding the Shopping List Service)

And in the shopping list component TypeScript file,

4:12

S… Speaker 2 (123. Adding the Shopping List Service)

we can get rid of the on ingredient added method because we'll now do this in the service.

4:17

S… Speaker 2 (123. Adding the Shopping List Service)

So back to the shopping added component where we create a new ingredient.

4:20

S… Speaker 2 (123. Adding the Shopping List Service)

Here I want to use the service and for this I will access

4:24

S… Speaker 2 (123. Adding the Shopping List Service)

my service.

4:25

S… Speaker 2 (123. Adding the Shopping List Service)

So I will inject SL service here like

4:30

S… Speaker 1 (123. Adding the Shopping List Service)

this.

4:30

S… Speaker 2 (123. Adding the Shopping List Service)

Make sure to add the import of course.

4:33

S… Speaker 2 (123. Adding the Shopping List Service)

And then on add item I'll add SL

4:37

S… Speaker 2 (123. Adding the Shopping List Service)

service and add an ingredient to it.

4:41

S… Speaker 2 (123. Adding the Shopping List Service)

This new ingredient here.

4:43

S… Speaker 2 (123. Adding the Shopping List Service)

Now, if we save this and now try adding a new

4:48

S… Speaker 2 (123. Adding the Shopping List Service)

item here,

4:48

S… Speaker 2 (123. Adding the Shopping List Service)

red one,

4:49

S… Speaker 2 (123. Adding the Shopping List Service)

we don't see it,

4:51

S… Speaker 2 (123. Adding the Shopping List Service)

but we also don't get an error.

4:54

S… Speaker 1 (123. Adding the Shopping List Service)

Now,

4:55

S… Speaker 2 (123. Adding the Shopping List Service)

there is something wrong here,

4:57

S… Speaker 2 (123. Adding the Shopping List Service)

and we will find out what and fix it in the next lecture.

Transkript sa a te kreye pa AI (automatic speech recognition). Li ka gen erè — tcheke ak son orijinal la pou itilize kritik. Politik AI

❤️ Love STT.ai? Di zanmi ou yo!

Resume

Klike sou Remak pou kreye yon remak AI de transkript sa a.

Konbyen tan pou m' fè transkript la?

Mande nenpòt bagay sou transkript sa a - AI a pral jwenn seksyon ki enpòtan yo epi reponn.

Transkripte yon lòt