import { Component, OnInit, Input, forwardRef } from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({  
   selector: 'db-mat-checkbox-list',
   template: `   
   <div [id]="dbmatcbId" class='cb-list'>
     <div class="cb-warpper" *ngFor="let opt of options; let i = index">
       <mat-checkbox [name]="opt" [value]="opt" [(ngModel)]="selectedModel[opt]" (change)="onChange($event)"></mat-checkbox>
     </div>
   </div>  
   `,
    styles: [`
    .cb-list {
        display: flex;
        padding: 10px;
    }
    .cb-warpper{
        width: 20%;
        min-width: 60px;
    }
    `],
    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DBMatCheckboxListComponent), multi: true }]
})
export class  DBMatCheckboxListComponent implements OnInit, ControlValueAccessor{
  dbmatcbId = `dbmat-checkbox-list-${idctr++}`;
  @Input() options: string[];

  private _innerValue: string[];

  selectedModel: { [s: string]: boolean; } = {};
  
  ngOnInit(): void {
    // Setting the initial value as false
    this.options.forEach(e => this.selectedModel[e] = false);
  }

  writeValue(obj: any): void {
    this._innerValue = obj;
    if (this._innerValue) {
      this._innerValue.forEach(e => this.selectedModel[e] = true);
      this._controlValueAccessorChangeFn(obj);
    }
  }

  onChange() {
    this._innerValue = Object.keys(this.selectedModel).filter(k =>   this.selectedModel[k]);
    this._controlValueAccessorChangeFn(this._innerValue);
  }
  
  registerOnChange(fn: any): void {
    this._controlValueAccessorChangeFn = fn;
  }

  registerOnTouched(fn: any): void {
    this._onTouched = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
    // throw new Error("Method not implemented.");
  }
  // Defaulf noop 
  private _controlValueAccessorChangeFn: (value: any) => void = () => { };
  private _onTouched: () => any = () => { };

  
}
let idctr = 0;

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'sample-cb-list',
    template: `
    <div>
        <db-mat-checkbox-list [options]="optionslist" name="cblist" [(ngModel)]="cblist"></db-mat-checkbox-list>
    </div>
    <div><button (click)="display()">Display</button></div>
    <div></div>
    `,
    styles: [``]
})
export class SampleCBCListComponent implements OnInit {

    optionslist: string[] = [];

    cblist: string[] = [];

    constructor() {}

    ngOnInit(): void {
        this.optionslist = ['Apple', 'Orange', 'Grapes']
    }


    display() {
      console.log('selected ', this.cblist);
    }
}