import { Component, NgModule, EventEmitter, Input, Output } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
class Joke {
setup: string;
punchline: string;
hide: boolean;
constructor(setup: string, punchline: string) {
this.setup = setup;
this.punchline = punchline;
this.hide = true;
}
toggle() {
this.hide = !this.hide;
}
}
@Component({
selector: 'joke-form',
template: `
`
})
class JokeFormComponent {
@Output() jokeCreated = new EventEmitter();
createJoke(setup: string, punchline: string) {
this.jokeCreated.emit(new Joke(setup, punchline));
}
}
@Component({
selector: 'joke',
template: `
{{ data.setup }}
{{ data.punchline }}
`
})
class JokeComponent {
@Input('joke') data: Joke;
}
@Component({
selector: 'joke-list',
template: `
`
})
class JokeListComponent {
jokes: Joke[];
constructor() {
this.jokes = [
new Joke('f1', 'efvdfg1'),
new Joke('f2', 'efvdfg2'),
new Joke('f3', 'efvdfg4')
];
}
addJoke(joke) {
this.jokes.unshift(joke);
}
}
@Component({
selector: 'app',
template: ''
})
class AppComponent {
}
@NgModule({
imports: [BrowserModule],
declarations: [
JokeComponent,
JokeListComponent,
AppComponent,
JokeFormComponent
],
bootstrap: [AppComponent]
})
class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);