Angular Checkbox

checkbox.componen.ts

import { AfterViewChecked, Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'seveves-checkbox',
  template: `
    <fieldset class="form-group">
      <div class="form-check">
        <label class="form-check-label" [for]="name">
          <input type="checkbox"
            [id]="name"
            class="form-check-input mr-3"
            [(ngModel)]="check">{{label}}
        </label>
      </div>
    </fieldset>
  `,
})
export class CheckBox implements AfterViewChecked {
  @Output() public checkChange = new EventEmitter<boolean>();
  @Input() public name: string;
  @Input() public label: string;

  @Input() public get check() {
    return this.checkedValue;
  }

  public set check(val) {
      this.checkedValue = val;
      if (this.viewChecked) {
        this.checkChange.emit(this.check);
      }
  }

  private viewChecked: boolean;
  private checkedValue: boolean;

  public ngAfterViewChecked() {
    this.viewChecked = true;
  }
}