Skip to content

Commit 3a7beb9

Browse files
crisbetommalerba
authored andcommitted
refactor(menu): change menu item host listeners so they can be safely inherited (#15871)
[Based on the discussion here](https://github.com/angular/material2/pull/15857/files#r277058391). Reworks the host listeners in `MatMenuItem` so that extending it works properly both in ViewEngine and Ivy.
1 parent 20a879a commit 3a7beb9

File tree

1 file changed

+13
-3
lines changed

1 file changed

+13
-3
lines changed

src/lib/menu/menu-item.ts

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
Inject,
1717
Optional,
1818
Input,
19+
HostListener,
1920
} from '@angular/core';
2021
import {
2122
CanDisable, CanDisableCtor,
@@ -50,8 +51,6 @@ export const _MatMenuItemMixinBase: CanDisableRippleCtor & CanDisableCtor & type
5051
'[attr.tabindex]': '_getTabIndex()',
5152
'[attr.aria-disabled]': 'disabled.toString()',
5253
'[attr.disabled]': 'disabled || null',
53-
'(click)': '_checkDisabled($event)',
54-
'(mouseenter)': '_handleMouseEnter()',
5554
},
5655
changeDetection: ChangeDetectionStrategy.OnPush,
5756
encapsulation: ViewEncapsulation.None,
@@ -129,6 +128,12 @@ export class MatMenuItem extends _MatMenuItemMixinBase
129128
}
130129

131130
/** Prevents the default element actions if it is disabled. */
131+
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
132+
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
133+
// ViewEngine they're overwritte.
134+
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
135+
// tslint:disable-next-line:no-host-decorator-in-concrete
136+
@HostListener('click', ['$event'])
132137
_checkDisabled(event: Event): void {
133138
if (this.disabled) {
134139
event.preventDefault();
@@ -137,6 +142,12 @@ export class MatMenuItem extends _MatMenuItemMixinBase
137142
}
138143

139144
/** Emits to the hover stream. */
145+
// We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
146+
// In Ivy the `host` bindings will be merged when this class is extended, whereas in
147+
// ViewEngine they're overwritte.
148+
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
149+
// tslint:disable-next-line:no-host-decorator-in-concrete
150+
@HostListener('mouseenter')
140151
_handleMouseEnter() {
141152
this._hovered.next(this);
142153
}
@@ -164,4 +175,3 @@ export class MatMenuItem extends _MatMenuItemMixinBase
164175
}
165176

166177
}
167-

0 commit comments

Comments
 (0)