@Component({
selector: 'mouse-hover-test',
template: '<div [class.hovered]="hovered"></div>"'
})
class MouseHoverTestCmp {
public hovered: boolean;
@HostListener('mouseover') onMouseOver() {
this.hovered = true;
}
@HostListener('mouseout') onMouseOut() {
this.hovered = false;
}
}@Directive({
selector: '[hoverClass]'
})
class HoverClassCmp {
@Input('hoverClass') className: string;
@HostBinding('class') activeClass: string;
@HostListener('mouseover') onMouseOver() {
this.activeClass = this.className;
}
@HostListener('mouseout') onMouseOut() {
this.activeClass = '';
}
}А повестить обработчик можно только на весь компонент целиком? Хотелось бы на отедльный dom-элемент
@Component({
selector: 'my-app',
styles: [`
.highlight { background: yellow; }
`],
template: `
<h1 [class.highlight]="highlighted">My First Angular 2 App</h1>
<div
(mouseover)="onMouseOver()"
(mouseout)="onMouseOut()">Hover me</div>
`
})
export class AppComponent {
highlighted: boolean;
onMouseOver() {
this.highlighted = true;
}
onMouseOut() {
this.highlighted = false;
}
}