Authors:Zhicheng Wang

• html
• ts
• scss
• spec.ts

<div class="card">
  <div class="card-header">
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input [(ngModel)]="select.allSelected" [indeterminate]="select.indeterminate" class="form-check-input"
               type="checkbox"/>
        <span i18n>All</span>
      </label>
    </div>
    <span (click)="select.allSelected = !select.allSelected" [class.active]="select.allSelected"
          [class.indeterminate]="select.indeterminate"
          class="btn btn-primary" i18n>
        Customized "Checkbox"
      </span>
  </div>
  <div class="card-body">
    <div *ngFor="let option of options" class="form-check form-check-inline">
      <label class="form-check-label">
        <input (ngModelChange)="select.selectAs(option, $event)" [ngModel]="select.selected(option)"
               class="form-check-input"
               type="checkbox"/>
        {{option.label}}
      </label>
    </div>
  </div>
</div>

<app-json-viewer [value]="select.selection"></app-json-viewer>