51 lines
1.1 KiB
Plaintext
51 lines
1.1 KiB
Plaintext
|
import { Component } from '@angular/core';
|
||
|
|
|
||
|
|
// #docregion
|
||
|
|
export class HeroHostComponent {
|
||
|
|
constructor() {
|
||
|
|
this.active = false;
|
||
|
|
this.clicks = 0;
|
||
|
|
this.headingClass = true;
|
||
|
|
this.title = 'Hero Host Tooltip';
|
||
|
|
}
|
||
|
|
|
||
|
|
clicked() {
|
||
|
|
this.clicks += 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
enter(event) {
|
||
|
|
this.active = true;
|
||
|
|
this.headingClass = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
leave(event) {
|
||
|
|
this.active = false;
|
||
|
|
this.headingClass = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// #docregion metadata
|
||
|
|
HeroHostComponent.annotations = [
|
||
|
|
new Component({
|
||
|
|
selector: 'hero-host',
|
||
|
|
template: `
|
||
|
|
<h1 [class.active]="active">Hero Host</h1>
|
||
|
|
<div>Heading clicks: {{clicks}}</div>
|
||
|
|
`,
|
||
|
|
host: {
|
||
|
|
// HostBindings to the <hero-host> element
|
||
|
|
'[title]': 'title',
|
||
|
|
'[class.heading]': 'headingClass',
|
||
|
|
'(click)': 'clicked()',
|
||
|
|
|
||
|
|
// HostListeners on the entire <hero-host> element
|
||
|
|
'(mouseenter)': 'enter($event)',
|
||
|
|
'(mouseleave)': 'leave($event)'
|
||
|
|
},
|
||
|
|
// Styles within (but excluding) the <hero-host> element
|
||
|
|
styles: ['.active {background-color: yellow;}']
|
||
|
|
})
|
||
|
|
];
|
||
|
|
// #docregion metadata
|
||
|
|
// #enddocregion
|