diff --git a/goldens/material/menu/index.api.md b/goldens/material/menu/index.api.md index e2c4711e4da0..2b79df3d1af9 100644 --- a/goldens/material/menu/index.api.md +++ b/goldens/material/menu/index.api.md @@ -100,7 +100,7 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnI _handleKeydown(event: KeyboardEvent): void; hasBackdrop?: boolean; _hovered(): Observable; - _isAnimating: boolean; + _isAnimating: i0.WritableSignal; // @deprecated items: QueryList; lazyContent: MatMenuContent; diff --git a/src/material/menu/menu.html b/src/material/menu/menu.html index d8988e08ef3f..bfa7b7419207 100644 --- a/src/material/menu/menu.html +++ b/src/material/menu/menu.html @@ -5,7 +5,7 @@ [class]="_classList" [class.mat-menu-panel-animations-disabled]="_animationsDisabled" [class.mat-menu-panel-exit-animation]="_panelAnimationState === 'void'" - [class.mat-menu-panel-animating]="_isAnimating" + [class.mat-menu-panel-animating]="_isAnimating()" (click)="closed.emit('click')" tabindex="-1" role="menu" diff --git a/src/material/menu/menu.ts b/src/material/menu/menu.ts index aa081b9440b5..88c2ec9e1390 100644 --- a/src/material/menu/menu.ts +++ b/src/material/menu/menu.ts @@ -29,6 +29,7 @@ import { AfterRenderRef, inject, Injector, + signal, } from '@angular/core'; import {_IdGenerator, FocusKeyManager, FocusOrigin} from '@angular/cdk/a11y'; import {Direction} from '@angular/cdk/bidi'; @@ -137,7 +138,7 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnI readonly _animationDone = new Subject<'void' | 'enter'>(); /** Whether the menu is animating. */ - _isAnimating = false; + _isAnimating = signal(false); /** Parent menu of the current menu panel. */ parentMenu: MatMenuPanel | undefined; @@ -461,13 +462,13 @@ export class MatMenu implements AfterContentInit, MatMenuPanel, OnI this._exitFallbackTimeout = undefined; } this._animationDone.next(isExit ? 'void' : 'enter'); - this._isAnimating = false; + this._isAnimating.set(false); } } protected _onAnimationStart(state: string) { if (state === ENTER_ANIMATION || state === EXIT_ANIMATION) { - this._isAnimating = true; + this._isAnimating.set(true); } }