Working with events in directives
import { Component } from '@angular/core';
import {MyDirective} from './my-directive.directive'
@Component({
moduleId: module.id,
selector: 'test6-app',
templateUrl: 'test6.component.html',
styleUrls: ['test6.component.css'],
directives:[MyDirective]
})
export class Test6AppComponent {
title = 'test6 works!';
isFavorite = true;
}
<h1 [MyDirective]="isFavorite">
{{title}}
</h1>
.is-favorite{
color:red;
}
.is-favorite-hovering{
color:blue;
}
import { Directive, HostBinding, HostListener, Input } from '@angular/core';
@Directive({
selector: '[MyDirective]'
})
export class MyDirective {
@HostBinding('class.is-favorite') isFavorite = true;
@HostBinding('class.is-favorite-hovering') hovering = false;
@HostListener('mouseenter')
onMouseEnter(){
this.hovering = true;
};
@HostListener('mouseleave')
onMouseLeave(){
this.hovering = false;
};
@Input()
set MyDirective(value){
this.isFavorite = value;
}
constructor() {}
}