How to prevent angular material mat-menu from closing?

by

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.

More Related Contents:

  1. Angular 2 Material 2 datepicker date format
  2. how to define index in angular material table
  3. based on mobile number how do i get country code in javascript or anguler 2+ [duplicate]
  4. How do I return the response from an Observable/http/async call in angular?
  5. How to load external scripts dynamically in Angular?
  6. Property ‘…’ has no initializer and is not definitely assigned in the constructor
  7. Angular 5 Service to read local .json file
  8. Angular 2: Two backend service calls on success of first service
  9. Angular: Can’t find Promise, Map, Set and Iterator
  10. Wait for multiple promises to finish
  11. Angular2 component’s “this” is undefined when executing callback function
  12. Angular 2: Callback when ngFor has finished
  13. Upgrading to angular-6.x gives “Uncaught ReferenceError: global is not defined”
  14. Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?
  15. How to subscribe to an event on a service in Angular2?
  16. Angular 2 pipe that transforms JSON object to pretty-printed JSON
  17. Angular 6 – process is not defined when trying to serve application
  18. Angular url plus sign converting to space
  19. How to Pass data from child to parent component Angular
  20. ‘Access-Control-Allow-Credentials’ header in the response is ” which must be ‘true’
  21. How to ‘wait’ for two observables in RxJS
  22. Generate dynamic css based on variables angular
  23. Angular 8 – Lazy loading modules : Error TS1323: Dynamic import is only supported when ‘–module’ flag is ‘commonjs’ or ‘esNext’
  24. Angular 2 Quickstart: unexpected token
  25. Angular 2 runOutsideAngular still change the UI
  26. Angular 4 – What is the right way to “wait for operation”?
  27. ng2-charts update labels and data
  28. How to disable Browser back button in Angular 2
  29. Filter Array in Array by date between 2 dates
  30. Protractor Angular 2 Failed: unknown error: angular is not defined

Leave a Comment