thisiszoaib

<a mat-tab-link *ngFor="let tabItem of tabs" 
     [routerLink]="tabItem.route" 
     routerLinkActive 
     #rla="routerLinkActive"
     [active]="rla.isActive">
...
</a>

thisiszoaib

<mat-chip-list>
    <mat-chip *ngFor="let option of options" [value]="option">
        {{option}}
    </mat-chip>
</mat-chip-list>

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>

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>

thisiszoaib

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

thisiszoaib

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

thisiszoaib

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

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

propagateChange(value: string[]) {
    if (this.onChange) {
      this.onChange(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

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

thisiszoaib

disabled = false;

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

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