Menu
I'm creating a date time picker control in the angular material and having the below code to do that
<button mat-button [matMenuTriggerFor]="menu"> <mat-icon>date_range</mat-icon> <span>Date Range</span> </button> <mat-menu #menu="matMenu"> <div fxLayout="row"> <div fxLayout="column"> <button (click)="setInterval(15)" mat-menu-item>Last 15 minutes</button> <button (click)="setInterval(360)" mat-menu-item>Last 6 hours</button> <button (click)="setInterval(1440)" mat-menu-item>Last 24 hours</button> <button (click)="setInterval(2880)" mat-menu-item>Last 2 days</button> <button (click)="setInterval(10080)" mat-menu-item>Last 7 days</button> <button (click)="setInterval(-1)" [matMenuTriggerFor]="dateTimeMenu" mat-menu-item>Custom</button> </div> <mat-menu class="date-range-menu" #dateTimeMenu="matMenu"> <div fxLayout="row"> <div fxLayout="column"> <b>From</b> <mat-calendar></mat-calendar> </div> <div fxLayout="column"> <b>To</b> <mat-calendar></mat-calendar> </div> </div> </mat-menu> </div> </mat-menu> Currently when ever I click a button it is closing the menu. I know we can do $event.stoppropagation() on each mat-menu-item to prevent it from closing.
But I want to know is it possible to do that for mat-calendar
As you can see in the above image currently when i select a date it is closing the menu. Is it possible to prevent that?
882
stoppropagation() on each mat-menu-item to prevent it from closing. As you can see in the above image currently when i select a date it is closing the menu.
Show activity on this post. this should be the real answer, but just to add one extra note you need to set the [hasBackdrop]="false", in order to prevent the menu from closing when click outside of it.
To implement menu items in Angular we can use angular material menu module called MatMenuModule . mat-menu selector is used to display floating menu panel containing list of menu items.
There are two ways to close a mat dialog programmatically in Angular. in your dialog’s constructor. which closes the mat dialog when it gets called. If you want to close the mat dialog from its parent component i.e. the component which has called the mat dialog, you can make use of the dialogRef to close it programmatically.
To implement menu items in Angular we can use angular material menu module called MatMenuModule. mat-menu selector is used to display floating menu panel containing list of menu items.
My question is how to stop mat-menu from closing when you click OUTSIDE of it (menu). The click is handled by the overlay backdrop. You can apply/remove classes to the backdrop dynamically based on your menu open and close, and defeat the backdrop click using CSS with pointer-events.
If you are using angular routes in your application we can navigate to that particular route on mat menu click event. Or we can add another property to the MatMenuListItem which represents angular route to navigate so that we can avoid the above if loop check.
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.
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
