How to prevent angular material mat-menu from closing?

You just add (click) = "$event.stopPropagation()" to the parent element of these calendars. Like below,

<mat-menu class="date-range-menu" #dateTimeMenu="matMenu">    <div fxLayout="row">        <div fxLayout="column" (click)="$event.stopPropagation();">            <b>From</b>            <mat-calendar></mat-calendar>        </div>        <div fxLayout="column" (click)="$event.stopPropagation();">            <b>To</b>            <mat-calendar></mat-calendar>        </div>    </div></mat-menu>

Stackblitz demo.

By giving a return to the previous solution, encapsulating the instruction in a method allows not to close the menu and continue executing instructions

IN HTML:

<mat-menu class="date-range-menu" #dateTimeMenu="matMenu">    <div fxLayout="row">        <div fxLayout="column" (click)="doSomething($event);">            <b>From</b>            <mat-calendar></mat-calendar>        </div>        <div fxLayout="column" (click)="doSomething($event)">            <b>To</b>            <mat-calendar></mat-calendar>        </div>    </div></mat-menu>

IN TS:

doSomething($event:any){    $event.stopPropagation();    //Another instructions}

if You want to stop closing mat-menu even on clicking on mat-menu-content i did hack as added $event.stopPropogation() on a anchor tag instead of mat-menu.so Menu dailog will not close even if clicked anywhere on the form.

Example:-     <mat-menu #nameAndDescriptioContextMenu="matMenu" [hasBackdrop]="false">         <a (click)="$event.stopPropagation();$event.preventDefault();">               <div>                 Form Group Form               </div>          </a>     </mat-menu>