Write Compound Components with Angular’s ContentChild

Instructor: [00:00] This toggle component is exposing its internal state to us through inputs and outputs. However, it doesn't give us any control over what's actually displayed inside of the toggle component.

[00:10] We're going to try to remedy that using a pattern called compound components. This is where multiple components work together to give the parent component more control over how the whole system works.

[00:25] We will add three child components to the toggle component -- toggle button, toggle-on, and toggle-off. Toggle button will display the switch that toggles on and off.

[00:43] Toggle-on, we'll use to display some message when the toggle is on. Toggle-off will display a message when the toggle is off. Now all of these have red squiggles on them because we haven't defined them yet, so let's go do that.

[00:58] First, we'll create the toggle button component. This component looks very similar to the toggle component that we defined previously.

[01:08] Next, we'll make the toggle-on component. The toggle-on component just has one input and displays its contents if that input is true. Finally, we'll make the toggle-off component. The toggle-off component also takes one boolean input and displays its content only if that value is not true.

[01:39] We'll also need a toggle module to bundle up all of these components together. That simply takes the toggle component, toggle-on/off, and toggle button declares them here. This switch component is just the UI that displays our toggle. Then it exports them so that other components can use them.

[02:04] All the complexity of this compound toggle component is in this toggle component here. I'm going to get rid of this toggle component HTML file since we don't really need it and change the template to the inline here, and set it to ngContent, which simply displays whatever is inside of the root title component tags.

[02:30] Since the switch itself is no longer on this toggle component, we can remove the on-click function. We need to get a reference to all three child components. We'll use the ContentChild decorator and get a reference to the toggle-on component that's inside of this.

[02:52] We'll call this toggle-on, so type toggle-on component. We'll do the same thing for toggle-off and toggle button. We'll fix up our imports. Now we have referenced all three of those child components.

[03:25] Anything referenced with the @ContentChild decorator is not guaranteed to be present when the component is initialized, so we need to use a Lifecycle hook of AfterContentInit. That allows us to use the ngAfterContentInit function in our component.

[03:48] Inside this function, we know that any content of the component has been processed, so we now have a real reference to the toggle button. When the toggled output is emitted from the toggle button, we can get a subscription to that.

[04:13] When that value comes through, we can update our current state and emit to the parent. We also need to update the state of all of our child components.

[04:42] Let's include the toggle module in our app module out here. Import toggle module from toggle.module. We don't need the switch component, and we don't need that. Let's add the toggle-on module here. Let's go back here. Now we have toggle button and toggle-on, toggle-off. We can toggle this button on and off. The toggle component works.

[05:22] Now we have the flexibility to reposition these child components and add HTML, or other Angular components if we want to.