121. Managing Recipes in a Recipe Service

Jul 15, 2026 05:14 · 4:07 · English · Whisper Turbo · 2 Kaikōrero

Ka ngaro tēnei tāruatanga i tēnei rā. Whakahauhau mo te rokiroki tūturu →

Whakapānga

0:02

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

What should our recipe service do for us?

0:05

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

I guess it makes sense if the recipe service is the

0:09

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

place in our app where we manage our recipes.

0:11

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

Therefore,

0:13

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

we should take our recipes,

0:15

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

which we currently manage in our recipe list,

0:18

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

and manage it in the recipe service.

0:21

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

That's the first thing with which I'll start,

0:24

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

so I'll simply copy it for now.

0:27

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

and add it as a property in the recipe service.

0:29

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

Of course,

0:30

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

we now have to add the import pointing to the recipe model file,

0:34

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

which sits in the same folder as the service.

0:36

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

So with that,

0:37

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

we get an array of recipes in the recipe service.

0:41

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

And I will actually make this private so that

0:45

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

you can't directly access this array from outside.

0:49

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

Now with this added,

0:51

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

I also want to add a getRecipes method,

0:54

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

which will return this array so that we can get access to it from outside.

0:58

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

If I were to return it like this,

1:01

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

I actually return the direct reference to this array,

1:05

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

and since arrays and objects are reference types in JavaScript,

1:10

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

so it has nothing to do with Angular,

1:12

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

but not JavaScript it is,

1:13

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

well,

1:15

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

if we now change something on this array,

1:17

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

we will change it on the array in this service.

1:20

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

Therefore,

1:21

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

I will call slice with no arguments.

1:23

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

This will simply return a new array,

1:26

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

which is an exact copy of the one in this service file.

1:30

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

So therefore,

1:31

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

we really can't access the recipes array stored here from outside.

1:36

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

We only get a copy.

1:37

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

So that is a way to get our recipes.

1:42

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

Now with that,

1:44

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

we can and we have to add our service,

1:48

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

actually both services.

1:50

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

to a place in our app to provide them so that we can inject them.

1:54

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

Where should we provide both services?

1:57

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

Well,

1:59

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

let's start with providing the recipe service in

2:03

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

our recipe component.

2:04

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

We can always put it somewhere else later if we recognize

2:08

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

that we want access to it from another part in our app.

2:12

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

But for now,

2:12

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

I'll add providers,

2:14

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

this array,

2:15

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

to the recipe component.

2:17

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

Therefore,

2:18

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

this component and all other recipe -related components,

2:21

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

since they are all child components to this component in the end,

2:25

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

will share the same instance of this service,

2:27

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

but you won't be able to access the service or at least not the same instance in

2:31

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

other components like the shopping list component.

2:33

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

So here in providers,

2:35

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

I will...

2:37

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

list my recipe service.

2:39

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

Of course,

2:39

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

you have to add an import at the top telling TypeScript where to find this

2:43

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

type. Now with this,

2:46

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

we can use our recipe service here.

2:50

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

Now let's use it in the recipe list component.

2:54

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

Here right now,

2:55

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

we already manage our recipe array.

2:59

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

Now,

3:00

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

I don't want to do that here anymore.

3:02

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

It will be undefined initially.

3:04

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

We will get the value here in ngOnInit.

3:07

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

And for this,

3:09

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

we need to inject our service.

3:11

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

Now, we can do this since we just provided it on the parent component.

3:14

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

So here,

3:15

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

I will provide my recipe service,

3:18

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

which is of type recipe service.

3:22

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

Of course, make sure to import recipe service from the appropriate

3:26

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

file.

3:26

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

And this should be private here to use this TypeScript shortcut of

3:31

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

instantly assigning a property with the same name.

3:34

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

In ngon init,

3:36

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

I can now say this recipes equals this recipe

3:41

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

service get recipes.

3:43

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

And we will get this copy of recipes,

3:46

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

this copy of that array.

3:47

S… Speaker 1 (121. Managing Recipes in a Recipe Service)

Well,

3:48

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

let's see this in action.

3:50

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

If we save this.

3:52

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

We should and we do see the same as before.

3:55

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

The app works just like before because the only thing we changed right now is

4:00

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

where and how we manage our array of recipes.

4:03

S… Speaker 2 (121. Managing Recipes in a Recipe Service)

An important first step.

I hangaia tēnei tuhipoka e AI (whakaahua kōrero aunoa). Tērā pea kei roto ngā hapa - tirohia ki te oro taketake mō te whakamahinga tino hira. Ka taea te whakataki i te kaupapahere AI

❤️ E manakohia ana te STT.ai? Whakapāpāho ki ōna hoa!

Ko te whakarāpopoto

Ka pāhotia te Summarize hei waihanga i tētahi whakarāpopoto AI o tēnei tāruatanga.

E pātai ana ki te AI Mo tēnei whakahuatuhi

E pātai ana ki tētahi mea mo tēnei tāruatanga - ka kitea e te AI ngā wāhanga whai tikanga me te whakautu.

Ka whakamāori tētahi atu