[Angular] Modify User Provided UI with Angular Content Directives

If we’re going to make our toggle accessible, we’ll need to apply certain aria attributes to the control that does the toggling. Instead of making the parent component handle that, we can provide a toggler directive that automatically applies the needed attributes. Content directives allow the user to tell the UI component where to make those modifications.

 

<switch toggler [on]="on" (click)="fns.toggle()">
</switch>

 

We added a toggler directive to share all the common attrs:

import { Directive, HostBinding, Input } from '@angular/core';

@Directive({
  selector: '[toggler]'
})
export class TogglerDirective {
  @HostBinding('attr.role') role = 'switch';

  @HostBinding('attr.aria-checked') @Input() on;
  
  constructor() { }

}