niisar
5/17/2016 - 12:06 AM

Working with events in directives

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() {}
}