Modify User Provided UI with Angular Content Directives

Instructor: [00:00] Here is a toggle component that uses an ng template tag to render its UI. Now the parent component is providing two different user interfaces, one with the switch, and one with this button. You see both of them work just as expected, and they are wired up to the same state.

[00:17] We want to make these a little bit more accessible. We're going to add some accessibility features. Give them both a role of switch and make them aria-checked when the ON state is true.

[00:35] Now, the problem is that no matter how much you put this in the documentation. Most developers will not remember to put these kinds of tags on the user interface elements.

[00:46] We want to do is bundle up all of this common functionality into one toggler directive. Then whenever developer makes their own custom user interface, they just drop this toggler directive on it, and the toggler directive will take care of adding that role attribute and the aria-checked attribute.

[01:05] Let's make that directive. We'll set the selector to toggler. First, we'll use a host binding decorator to set the role attribute to switch. Next, we need to have an ON input, so we can know when the toggle is ON or OFF.

[01:37] We'll simply add another host binding decorator on that same ON attribute, and we'll bind it to the aria-checked attribute. Now whenever ON is true, aria-checked will be set to true. Whenever ON is false, aria-checked will be set to false.

[01:57] Let's go back to the app component here. The only thing we need to change is we need to set this ON attribute on the button for this toggler here. This toggler up here will listen to this ON input that was already there for their switch.

[02:19] Now if inspect this button, we see that the role is switch. If we toggle it, we have aria-checked true, and we toggle that OFF, aria-checked false. This toggler directive is doing what is supposed to do.