Modify User Provided UI with Content Directives
Part 7 of Advanced Angular Component Patterns
AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!
‹ 06 Use <ng-template>
08 Allow Users to Configure Content Directives ›
Since the parent component is responsible for all of the UI, there are extra decisions that the developer has to make that they might forget. For instance, adding aria attributes to a custom switch control.
It would be nice if the toggle component could give the parent component developer some hooks that would put some reasonable defaults on their custom switch component.
Goal:
Give the parent component hooks for the toggle component to interact with and modify the provided UI.
Implementation:
The [toggler] directive takes care of adding role="switch" and aria-pressed attributes to whatever element the parent component developer adds it. The [toggler] directive has an [on] input (that can be shared with the <switch> component) which it uses to determine whether aria-pressed is true or false.
