2016-05-03 14:06:32 +02:00
|
|
|
import { Component, HostBinding, HostListener } from '@angular/core';
|
2016-03-16 18:01:33 +02:00
|
|
|
|
|
|
|
// #docregion
|
|
|
|
@Component({
|
|
|
|
selector: 'heroes-bindings',
|
|
|
|
template: `<h1 [class.active]="active">
|
2016-05-03 14:06:32 +02:00
|
|
|
Tour ofHeroes
|
2016-03-16 18:01:33 +02:00
|
|
|
</h1>`
|
|
|
|
})
|
|
|
|
export class HeroesComponent {
|
|
|
|
@HostBinding() title = 'Tooltip content';
|
|
|
|
@HostBinding('class.heading')
|
2016-06-08 01:06:25 +02:00
|
|
|
hClass = true;
|
|
|
|
active: boolean;
|
2016-03-16 18:01:33 +02:00
|
|
|
|
|
|
|
constructor() {}
|
|
|
|
|
|
|
|
@HostListener('click')
|
|
|
|
clicked() {
|
|
|
|
this.active = !this.active;
|
|
|
|
}
|
|
|
|
|
|
|
|
@HostListener('dblclick', ['$event'])
|
2016-06-08 01:06:25 +02:00
|
|
|
doubleClicked(evt: Event) {
|
2016-03-16 18:01:33 +02:00
|
|
|
this.active = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// #enddocregion
|