How to embed the toggle button into the mat-options?

Question

I need to embed the toggle button or radio button inside the mat-options list. The desired design is as follows.

ISSUE:

I have added the toggle button inside the options list with the following code but by clicking on the toggle button the option is checked or unchecked rather than changing the toggle state.

<mat-option (click)="handleSelected(item)" *ngFor="let item of defaultSelectValue | dataSearch : field.searchCtrl.value" [value]="field.keySelect ? item[this.field.selectKey] : item">
    {{ item[this.field.selectValue] }} 
<mat-slide-toggle></mat-slide-toggle>
</mat-option>

Please guide me that, How can I achieve it in a way that both things work correspondingly?

Answer 1

We can achieve this with the help of event propagation as shown in below code snippet.

<mat-form-field>
  <mat-label>Select options</mat-label>
  <mat-select [(ngModel)]="selectedOptions" multiple>
    <mat-option *ngFor="let option of options" [value]="option.value">
      <span>{{ option.label }}</span>
      <mat-slide-toggle (click)="$event.stopPropagation()"></mat-slide-toggle>
    </mat-option>
  </mat-select>
</mat-form-field>