126. Passing Ingredients from Recipes to the Shopping List (via a Service)

0:01

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

In the last lecture,

0:02

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we added some ingredients.

0:03

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Now I want you to make this to shopping list button work.

0:08

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

You can come up with some ideas,

0:10

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

some solution on how you can send these items to

0:14

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

the shopping list so that once we go to the shopping list,

0:17

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we see them here.

0:19

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Think about informing the component that something changed.

0:23

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

And also think about how to add more than

0:27

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

one item at once to the shopping list.

0:29

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

I wish you luck with that.

0:31

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Time to pause.

0:32

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

In a couple of seconds,

0:33

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we'll do it together.

0:34

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

So,

0:37

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

were you successful?

0:38

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Let's add the shopping list items together.

0:41

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

We already have this button in the recipe

0:45

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

detail component.

0:46

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

So the first step,

0:47

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

of course, is to hook this button up.

0:50

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

I will remove the ref here and instead

0:54

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

add an inline style to still have a cursor,

0:57

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

which looks like a pointer.

0:58

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

But then here on the click listener,

1:00

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

I'll call on add to shopping

1:05

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

list.

1:05

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Of course,

1:06

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

you can choose a different name.

1:07

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Now that will be executed here in the

1:11

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

component body in the recipe detail component TypeScript file.

1:15

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

And here,

1:17

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

We either need to get access to the shopping list service or

1:22

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

to the recipe service.

1:24

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

And then the recipe service accesses the shopping list service.

1:28

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

You can find arguments for both.

1:30

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

You could say we're in the recipe section,

1:32

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

therefore we should mainly work with the recipe service.

1:35

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

You could say,

1:36

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

why would we take this extra...

1:38

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

way this extra step we can directly access the shopping list service again

1:43

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

arguments can be found for both directions i will choose the route where

1:47

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we use the recipe service so i will inject the

1:52

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

recipe service here type recipe service

1:56

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

of course make sure to add the import and now i need to add a

2:00

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

method in the recipe service this is the

2:04

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

add ingredients to shopping list method.

2:08

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Of course, you can also pick a shorter name if this one is a bit too long for you.

2:11

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Here,

2:12

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

I expect to receive my ingredients.

2:15

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

So that will be of type ingredients.

2:17

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

And before we continue working on this in the recipe service,

2:21

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

let's call this method.

2:24

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

So in the shopping,

2:26

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

excuse me,

2:27

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

in the recipe detail component,

2:29

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

I will access my recipe service,

2:31

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

call this brand new method with the extremely short name and

2:36

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

pass on the ingredients of this

2:40

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

recipe here.

2:41

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

So these ingredients.

2:42

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

So with that,

2:44

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

these ingredients are passed to the recipe service.

2:47

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Now here we need to access the shopping list service.

2:52

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Now, for that,

2:53

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we need to get access to the shopping list service in this file.

2:55

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

And if you want to inject a service into a service,

2:58

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

as we want to do here,

3:00

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

you need to add injectable to that service.

3:04

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Make sure to import it from at AngularCore.

3:07

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

With that added here,

3:11

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we can inject the service now in the constructor of this

3:15

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

recipe service class.

3:17

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Here I'll add the sl service,

3:20

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

so the shopping list service,

3:22

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

to which you'll need to add an import at the top,

3:25

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

pointing to the shopping list folder and then the shopping list service file.

3:29

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

And with that added,

3:32

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we can now reach out to that here,

3:36

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

sl service,

3:37

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

and here we need to add a new method.

3:40

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

So let's go to the shopping list service.

3:43

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

And let's add a add ingredients method

3:48

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

like that.

3:49

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Now in here,

3:52

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we will receive our list of ingredients.

3:55

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

So of type ingredient array.

3:57

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

And now we need a logic to add them.

3:59

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Now a quick and easy way would be to simply loop through

4:04

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

them. So let ingredient of ingredients,

4:07

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

whoops,

4:08

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

ingredients like that.

4:10

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

And then we could simply call this add ingredient

4:15

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

for each ingredient.

4:16

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

And that would be absolutely fine.

4:18

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

The only downside probably is that we emit a lot

4:22

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

of events.

4:23

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Now, it won't be too bad because even a recipe with like 30

4:27

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

ingredients wouldn't blow up our app.

4:29

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

But still,

4:30

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

there are a lot of unnecessary event emissions.

4:33

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

So that is a viable option,

4:35

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

but I'll comment it out.

4:37

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

A different one would be to directly add all

4:41

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

ingredients in one go and then emit our event.

4:44

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

So we could access our ingredients here

4:48

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

and call the push method.

4:51

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

And now we can use a ES6 feature,

4:54

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

the spread operator,

4:56

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

which allows us to basically turn an array of elements

5:00

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

into a list of elements.

5:03

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

because the push method here is able to handle multiple objects.

5:09

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

However, it is not able to handle an array.

5:11

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Or to be precise,

5:13

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

it can handle an array,

5:14

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

but then it would push this array as a single object to the other

5:18

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

array. So by adding the spread operator,

5:21

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

which is simply three dots,

5:23

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

might look strange,

5:24

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

but that is how the operator looks,

5:26

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we can now simply spread our ingredients into a list of single

5:30

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

ingredients, which are now pushed without issues to our ingredients array.

5:34

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

And then,

5:35

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

don't forget it,

5:36

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we have to emit

5:38

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

that our ingredients changed,

5:39

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

so why don't we simply pass a copy of it?

5:43

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

So with that now,

5:46

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we got a method we can call addIngredients.

5:50

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

So back in the recipe service,

5:52

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

on the shopping list service,

5:54

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we can now call add ingredients and pass our ingredients to that

5:58

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

service.

5:58

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

With that,

6:00

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

let's save this and let's simply check this.

6:02

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Right now,

6:03

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we only have the default values of apples and tomatoes on our shopping

6:07

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

list.

6:07

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Now on the schnitzel,

6:09

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we got meat and french fries.

6:10

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Let's click to shopping list and let's go to the shopping list

6:15

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

and we see meat and french fries.

6:18

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Awesome. That looks really great.

6:21

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Of course, if you click this multiple times,

6:23

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

it will duplicate it.

6:25

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

And you can,

6:26

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

of course, write some logic to check if an item has already been added

6:31

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

and then group it together by name.

6:33

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

I won't do this in this application.

6:35

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

The main thing here is it works.

6:37

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

We can send data around through our app by using

6:41

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

services.

6:41

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

We took a major step forward.

6:45

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

Now,

6:45

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

in the next section,

6:47

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we're going to have a look at routing.

6:49

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

And thereafter,

6:50

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

we're going to add routing to this application to now get

6:54

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

a proper navigation and also to make this new recipe

6:58

S… Speaker 1 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

button here work.

6:59

S… Speaker 2 (126. Passing Ingredients from Recipes to the Shopping List (via a Service))

So see you there.

126. Passing Ingredients from Recipes to the Shopping List (via a Service)

Tóm tắt

Hỏi AI về bản ghi này