Skip to content

Commit 7a085c6

Browse files
committed
fix(material/menu): remove dependency on NgClass (#28877)
We can set classes directly through `[class]` instead of having to import `NgClass`. I had to adjust the code a bit, because the built-in `[class]` binding doesn't do diffing on the object literal. (cherry picked from commit 9381f90)
1 parent 4a56d6a commit 7a085c6

File tree

2 files changed

+19
-13
lines changed

2 files changed

+19
-13
lines changed

src/material/menu/menu.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div
33
class="mat-mdc-menu-panel mat-mdc-elevation-specific"
44
[id]="panelId"
5-
[ngClass]="_classList"
5+
[class]="_classList"
66
(keydown)="_handleKeydown($event)"
77
(click)="closed.emit('click')"
88
[@transformMenu]="_panelAnimationState"

src/material/menu/menu.ts

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ import {MenuPositionX, MenuPositionY} from './menu-positions';
4747
import {throwMatMenuInvalidPositionX, throwMatMenuInvalidPositionY} from './menu-errors';
4848
import {MatMenuContent, MAT_MENU_CONTENT} from './menu-content';
4949
import {matMenuAnimations} from './menu-animations';
50-
import {NgClass} from '@angular/common';
5150

5251
let menuPanelUid = 0;
5352

@@ -109,7 +108,6 @@ export function MAT_MENU_DEFAULT_OPTIONS_FACTORY(): MatMenuDefaultOptions {
109108
animations: [matMenuAnimations.transformMenu, matMenuAnimations.fadeInItems],
110109
providers: [{provide: MAT_MENU_PANEL, useExisting: MatMenu}],
111110
standalone: true,
112-
imports: [NgClass],
113111
})
114112
export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnInit, OnDestroy {
115113
private _keyManager: FocusKeyManager<MatMenuItem>;
@@ -126,7 +124,7 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
126124
/** Only the direct descendant menu items. */
127125
_directDescendantItems = new QueryList<MatMenuItem>();
128126

129-
/** Config object to be passed into the menu's ngClass */
127+
/** Classes to be applied to the menu panel. */
130128
_classList: {[key: string]: boolean} = {};
131129

132130
/** Current state of the panel animation. */
@@ -221,22 +219,25 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
221219
@Input('class')
222220
set panelClass(classes: string) {
223221
const previousPanelClass = this._previousPanelClass;
222+
const newClassList = {...this._classList};
224223

225224
if (previousPanelClass && previousPanelClass.length) {
226225
previousPanelClass.split(' ').forEach((className: string) => {
227-
this._classList[className] = false;
226+
newClassList[className] = false;
228227
});
229228
}
230229

231230
this._previousPanelClass = classes;
232231

233232
if (classes && classes.length) {
234233
classes.split(' ').forEach((className: string) => {
235-
this._classList[className] = true;
234+
newClassList[className] = true;
236235
});
237236

238237
this._elementRef.nativeElement.className = '';
239238
}
239+
240+
this._classList = newClassList;
240241
}
241242
private _previousPanelClass: string;
242243

@@ -465,12 +466,15 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
465466
});
466467

467468
if (!customElevation || customElevation === this._previousElevation) {
469+
const newClassList = {...this._classList};
470+
468471
if (this._previousElevation) {
469-
this._classList[this._previousElevation] = false;
472+
newClassList[this._previousElevation] = false;
470473
}
471474

472-
this._classList[newElevation] = true;
475+
newClassList[newElevation] = true;
473476
this._previousElevation = newElevation;
477+
this._classList = newClassList;
474478
}
475479
}
476480

@@ -482,11 +486,13 @@ export class MatMenu implements AfterContentInit, MatMenuPanel<MatMenuItem>, OnI
482486
* @docs-private
483487
*/
484488
setPositionClasses(posX: MenuPositionX = this.xPosition, posY: MenuPositionY = this.yPosition) {
485-
const classes = this._classList;
486-
classes['mat-menu-before'] = posX === 'before';
487-
classes['mat-menu-after'] = posX === 'after';
488-
classes['mat-menu-above'] = posY === 'above';
489-
classes['mat-menu-below'] = posY === 'below';
489+
this._classList = {
490+
...this._classList,
491+
['mat-menu-before']: posX === 'before',
492+
['mat-menu-after']: posX === 'after',
493+
['mat-menu-above']: posY === 'above',
494+
['mat-menu-below']: posY === 'below',
495+
};
490496

491497
// @breaking-change 15.0.0 Remove null check for `_changeDetectorRef`.
492498
this._changeDetectorRef?.markForCheck();

0 commit comments

Comments
 (0)