49 lines
1021 B
TypeScript
49 lines
1021 B
TypeScript
// #docregion
|
|
import { Component, Input } from '@angular/core';
|
|
|
|
import { Hero } from './hero';
|
|
|
|
@Component({
|
|
selector: 'happy-hero',
|
|
template: `Wow. You like {{hero.name}}. What a happy hero ... just like you.`
|
|
})
|
|
export class HappyHeroComponent {
|
|
@Input() hero: Hero;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'sad-hero',
|
|
template: `You like {{hero.name}}? Such a sad hero. Are you sad too?`
|
|
})
|
|
export class SadHeroComponent {
|
|
@Input() hero: Hero;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'confused-hero',
|
|
template: `Are you as confused as {{hero.name}}?`
|
|
})
|
|
export class ConfusedHeroComponent {
|
|
@Input() hero: Hero;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'unknown-hero',
|
|
template: `{{message}}`
|
|
})
|
|
export class UnknownHeroComponent {
|
|
@Input() hero: Hero;
|
|
get message() {
|
|
return this.hero && this.hero.name
|
|
? `${this.hero.name} is strange and mysterious.`
|
|
: 'Are you feeling indecisive?';
|
|
}
|
|
}
|
|
|
|
export const heroComponents = [
|
|
HappyHeroComponent,
|
|
SadHeroComponent,
|
|
ConfusedHeroComponent,
|
|
UnknownHeroComponent
|
|
];
|