Communicate Between Components Using Angular Dependency Injection

Instructor: [00:00] We have a new requirement for this compound toggle component. We need to support having multiple toggle-on and toggle-off child components inside of it, so let's see if that works. Looks like only one of the toggle-on and toggle-off components is actually being updated.

[00:15] We actually have another requirement as well. We've been handed this other component over here that contains its own toggle-on and toggle-off component. That should be able to be included here and receive its state from the toggle component. However, it looks like that's not updating either.

[00:39] One way to fix having multiple child components is to go into the toggle component.ts file here and change from content-child to content-children. Then you would get a query list of toggle-on components and you could iterate through those, but that wouldn't solve the problem with the other component.

[00:58] We're going to rewire the communication between the parts of this compound component to use dependency injection instead of content-child or content-children.

[01:06] First, let's take a look at the toggle-on component. Instead of having its own internal state, we will use the constructor to inject an instance of the parent toggle component. Then we can simply use the toggle component's state inside of this child toggle-on component, and we'll fix the imports here.

[01:37] Next, we'll do the same thing with the toggle-off component. We're injecting the parent toggle component and we're using the state from that component in our template here. The last child component is the toggle button component.

[01:52] Once again, we're replacing the inputs and outputs with a reference to the parent toggle component. In the template, we're using that parent toggle component state but we need to do something different in this on-click method here. All of this logic needs to be moved up to the parent toggle component.

[02:13] We'll call the toggle components set-on-state function with a new value based on the previous toggle components on-state. Now this set-on-state has not been defined yet, so let's go write that.

[02:37] There's actually a lot of complexity in this component that we can just get rid of. It no longer needs a reference to its child components, doesn't need any of this stuff down here. All we need is the set-on-state function that takes a boolean value and updates the internal state and then emits a new value, and I'll clean up here.

[03:10] Now if we go back to our app component HTML, we have multiple copies of toggle-on and toggle-off. We have an other component that has toggle-on and toggle-off inside of it. Let's see if this works.

[03:22] You see that all the toggle-on and toggle-off components, no matter how deeply nested they are, are receiving their state from the top-level toggle component.