Angular Material2 Slide-toggle inside Menu

Question

Is there any proper way to display a Slide-toggle <mat-slide-toggle> inside Menu <mat-menu>

Furthermore, when I tap on the Slide-toggle, the menu disappears. Is there any way to prevent that from happening.

<mat-menu #menuSettings="matMenu">
    <button mat-menu-item>
      <mat-icon>account_circle</mat-icon>
      <span>Dark</span>
      <mat-slide-toggle></mat-slide-toggle>
    </button>
    <button mat-menu-item>
      <mat-icon>face</mat-icon>
      <span>Register now</span>
    </button>
</mat-menu>

Answer 1

You can do that by adding (click) = "$event.stopPropagation()" to the <mat-slide-toggle> element:

<mat-menu #menuSettings="matMenu">
    <button mat-menu-item>
      <mat-icon>account_circle</mat-icon>
      <span>Dark</span>
      <mat-slide-toggle (click)="$event.stopPropagation();"></mat-slide-toggle>
    </button>
    <button mat-menu-item>
      <mat-icon>face</mat-icon>
      <span>Register now</span>
    </button>
</mat-menu>