123. Adding the Shopping List Service

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

Šis transkriptas baigia galioti šiandien. Atnaujinti, kad būtų užtikrintas nuolatinis saugojimas →

Lekcijų indeksas

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.

Šis transkriptas buvo sukurtas AI (automatinis kalbos atpažinimas). Gali būti klaidų — patikrinti pagal originalų garso kritinį naudojimą. PG politika

❤️ Patinka STT.ai? Pasakyk draugams!

Santrauka

Spustelėkite Sumarizuokite, kad sukurtumėte šio stenogramos AIS santrauką.

Klausti AI apie šį transkriptą

Paklauskite apie šį stenogramą: AI ras atitinkamus skyrius ir atsakys.

Perrašyti kitą