web-dev-qa-db-fra.com

Comment empêcher la fermeture de angular mat-menu matériel?

Je crée un contrôle de sélecteur de date et d'heure dans le matériau angular et j'ai le code ci-dessous pour le faire

<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>

Actuellement, lorsque je clique sur un bouton, il ferme le menu. Je sais que nous pouvons faire $ event.stoppropagation () sur chaque élément de menu mat pour l'empêcher de se fermer.

Mais je veux savoir s'il est possible de le faire pour mat-calendar

enter image description here

Comme vous pouvez le voir dans l'image ci-dessus actuellement lorsque je sélectionne une date, il ferme le menu. Est-il possible d'empêcher cela?

javascriptangularangular-material2
19
Umamaheswaran

Vous venez d'ajouter (click) = "$event.stopPropagation()" à l'élément parent de ces calendriers. Comme ci-dessous,

<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>

Démo Stackblitz .

37
Anik

En donnant un retour à la solution précédente, l'encapsulation de l'instruction dans une méthode permet de ne pas fermer le menu et de continuer à exécuter les instructions

EN 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>

EN TS:

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