122. Using a Service for Cross-Component Communication

Jul 15, 2026 05:14 · 5:07 · English · Whisper Turbo · 2 Sprekers
Dit transcript verloopt vandaag. Upgrade voor permanente opslag →
Lezingenindex
Uitsluitend tonen
0:02
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
In the last lecture,
0:03
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
we used our recipe service,
0:04
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
and we created it in the first place,
0:06
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
we filled it with some live,
0:07
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
to manage our recipes in a central place.
0:10
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
That is working great.
0:11
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
Now,
0:12
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
let's use the service to improve our app.
0:16
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
Remember,
0:17
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
we have this long chain of inputs and outputs getting
0:21
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
a selected item from the recipe item component over the
0:25
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
recipe list component to the recipes component here
0:29
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
where we listen to that event and then all the way down using
0:33
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
the selected recipe property to the recipe detail component.
0:36
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
So this cross component communication.
0:39
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
That is a super long way for just informing
0:43
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
another component
0:45
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
that we selected an item.
0:46
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
We can do better,
0:48
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
and we should.
0:49
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
So what my goal is,
0:51
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
that in the recipe item component,
0:53
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
where we have this on selected click,
0:57
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
that here we can directly inform the recipe detail
1:01
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
component.
1:01
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
So in on click,
1:03
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
what I actually want to do here is,
1:05
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I want to not emit an event here,
1:08
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I will get rid of it here,
1:09
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
and therefore I can remove the imports of output and event meter.
1:14
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
Instead here,
1:15
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I want to call some method in my service,
1:18
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
which will then,
1:20
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
well,
1:20
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
transfer this data for me.
1:22
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
So in the recipe service,
1:25
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I'll add a new property,
1:27
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
a public property,
1:28
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
which will name recipe selected.
1:30
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
Of course,
1:30
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
you could choose a different name.
1:32
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
It will be an object instantiated by using
1:36
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
event emitter.
1:38
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
from AngularCore,
1:38
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
so you need to add this import.
1:40
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
Let's put it at the top of the file.
1:42
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
That's kind of a good practice to do with your Angular imports.
1:45
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
It will hold some recipe data,
1:48
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
and that's all I want to do in the recipe service.
1:51
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
With this setup,
1:53
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
and of course,
1:54
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
you could also encapsulate this by providing a method to get access to it and want to emit
1:58
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
the event, but I will use the property itself.
2:02
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
So by adding this,
2:03
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I can now go back to my recipe item component and then on selected,
2:08
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I want to do something with that property in the recipe service.
2:12
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
So first of all,
2:13
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
let's inject it.
2:14
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
Let's inject the recipe service as you learn to do it.
2:17
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
Make sure to import it,
2:19
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
pointing to the recipe service file in the right folder.
2:23
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
And then on the recipe service,
2:24
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
we can use this recipe selected event emitter and
2:29
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
call emit and emit the recipe of this
2:33
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
recipe item component because that is the one we selected.
2:36
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
And that's the data we want to pass.
2:38
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
Now with this trick or with this approach,
2:42
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
we can go to the recipe list component and remove
2:46
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
this listener where we listened to whether we did select it or not.
2:51
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
We can get rid of the onRecipesSelected code and get rid of our
2:55
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
own emitted event here.
2:57
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
So we're already saving a lot of code,
2:59
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
get rid of all these imports,
3:00
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
which we don't need anymore.
3:01
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
And in the recipes component HTML file,
3:05
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
we can also get rid of this event here on the recipe list because we
3:09
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
no longer use this chain of data to pass it around.
3:13
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
And now all I want to do is in this component here,
3:16
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I want to listen to this event in the recipe service
3:20
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
so that I can now correctly decide whether we do have a selected
3:25
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
recipe and should therefore render the detail component or if we should still
3:29
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
show this template with this please select a recipe text.
3:32
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
Therefore,
3:33
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I will inject the service here too.
3:37
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
Recipe service and since I provide the recipe service on this component
3:41
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
This component and all the other components in this recipe folder use
3:45
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
the same instance of the service which of course is super important Otherwise
3:49
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
the service where I emit the event would be a different one to the one
3:53
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I listen to it So I would never get informed about the event,
3:57
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
but here it will work because we're using the same instance
4:01
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
So here,
4:02
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
in ngOnInit,
4:03
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
for example, I can set up my listener.
4:06
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
So on the recipe selected,
4:09
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I can subscribe to it and get informed about any changes.
4:13
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
And now here,
4:15
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
I know I will receive some data,
4:18
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
which is of type recipe,
4:19
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
because that's how we configure the eventimeter.
4:21
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
It will give us a recipe.
4:23
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
And in this ES6 arrow function here,
4:27
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
that is the argument list,
4:29
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
and here is the function body.
4:31
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
Here I simply want to set this selected recipe equal
4:35
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
to the recipe we got with the event and with
4:40
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
that we should get the same behavior as before
4:44
S… Speaker 1 (122. Using a Service for Cross-Component Communication)
if we reload the app but now
4:47
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
having a much leaner approach of using a service
4:51
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
for cross -component communication,
4:54
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
which of course makes it much easier to pass this data as
4:58
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
you saw, and we don't have to build this complex chain of
5:02
S… Speaker 2 (122. Using a Service for Cross-Component Communication)
event and property binding.

Dit transcript werd gegenereerd door AI (automatische spraakherkenning). Kan fouten bevatten..verifieer tegen de oorspronkelijke audio voor kritisch gebruik. AI-beleid

❤️ Hou je van STT.ai? Vertel het je vrienden!
Samenvatting
Klik op Summarize om een AI samenvatting van dit transcript te genereren.
Samengevat...
Vraag AI over dit Transcript
Vraag maar iets over dit transcript De AI zal relevante secties en antwoord vinden.
Een andere transcriberen