checkbox-a2.component.ts

@Component({
  selector: 'app-checkbox',
  template: `
    <-- this will be the native input element which will hide with CSS -->
    <ng-content></ng-content>

    <label [for]="id">
      <-- add checkbox style here -->
      <ng-content select="[checkboxLabel]"></ng-content>
    </label>
  `
})
export class CheckboxComponent {
  id = guid();

  @ContentChild(TogglerRefDirective) set input(input: TogglerRefDirective) {
    input.setId(this.id);
  }
}

@NgModule({
  imports: [CommonModule],
  declarations: [CheckboxComponent],
  exports: [CheckboxComponent, TogglerRefDirectiveModule],
})
export class CheckboxModule {}