thisiszoaib

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: NetworkInterceptor,
      multi: true

thisiszoaib

<div class="content">
  
  <app-chips-multi-select [options]="options" [formControl]="chipsControl">
  </app-chips-multi-select>
  
  <mat-divider></mat-divider>
  
  <h3>Value: {{chipsControlValue$ | async}}</h3>
  
  <mat-divider></mat-divider>

thisiszoaib

@Component({
  selector: 'app-chips-multi-select',
  templateUrl: './chips-multi-select.component.html',
  styleUrls: ['./chips-multi-select.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: ChipsMultiSelectComponent,
      multi: true,
    },

thisiszoaib

disabled = false;

setDisabledState?(isDisabled: boolean): void {
    this.disabled = isDisabled;
}

toggleSelection(chip: MatChip) {
    if (!this.disabled) chip.toggleSelected();
}

thisiszoaib

ngAfterViewInit() {
    
    this.chipList.chipSelectionChanges
      .pipe(
        untilDestroyed(this),
        map((event) => event.source))
      .subscribe((chip) => {
        
        if (chip.selected) {
          this.value = [...this.value, chip.value];

thisiszoaib

@ViewChild(MatChipList) chipList!: MatChipList;

value: string[] = [];

writeValue(value: string[]): void {
    // When form value set when chips list initialized
    if (this.chipList && value) {
      this.selectChips(value);
    } else if (value) {
      // When chips not initialized

thisiszoaib

onChange!: (value: string[]) => void;

registerOnChange(fn: any): void {
    this.onChange = fn;
}

propagateChange(value: string[]) {
    if (this.onChange) {
      this.onChange(value);
    }

thisiszoaib

export class ChipsMultiSelectComponent implements OnInit, ControlValueAccessor {
  
  writeValue(value: string[]): void {
  }
  
  registerOnChange(fn: any): void {
  }
  
  registerOnTouched(fn: any): void {
  }

thisiszoaib

<mat-chip #c="matChip" *ngFor="let option of options" [value]="option">
        <mat-icon *ngIf="c.selected">check</mat-icon>
        {{option}}
</mat-chip>

thisiszoaib

<mat-chip-list selectable multiple>
    <mat-chip #c="matChip" *ngFor="let option of options" [value]="option" (click)="toggleSelection(c)">
        {{option}}
    </mat-chip>
</mat-chip-list>