// #docplaster import {Component, Input, Output, EventEmitter} from 'angular2/core'; import {Hero} from './hero'; let nextHeroDetailId = 1; // #docregion input-output-2 @Component({ // #enddocregion input-output-2 selector: 'hero-detail', // #docregion input-output-2 inputs: ['hero'], outputs: ['deleted'], // #enddocregion input-output-2 template: `
{{hero?.fullName}} delete
`, styles:['a { cursor: pointer; cursor: hand; }'] // #docregion input-output-2 }) // #enddocregion input-output-2 export class HeroDetailComponent { constructor() { // Toggle the line-through style so we see something happen // even if no one attaches to the `deleted` event. // Subscribing in ctor rather than the more obvious thing of doing it in // OnDelete because don't want this mess to distract the chapter reader. this.deleted.subscribe(() => { this.lineThrough = this.lineThrough ? '' : 'line-through'; }) } // #docregion deleted deleted = new EventEmitter(); onDelete() { this.deleted.emit(this.hero); } // #enddocregion hero: Hero = new Hero('','Zzzzzzzz'); // default sleeping hero // heroImageUrl = 'http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png'; // Public Domain terms of use: http://www.wpclipart.com/terms.html heroImageUrl = 'images/hero.png'; lineThrough = ''; } @Component({ selector: 'big-hero-detail', template: `
{{hero?.fullName}}
First: {{hero?.firstName}}
Last: {{hero?.lastName}}
Birthdate: {{hero?.birthdate | date:'longDate'}}
Web: {{hero?.url}}
Rate/hr: {{hero?.rate | currency:'EUR'}}

` }) export class BigHeroDetailComponent extends HeroDetailComponent { // #docregion input-output-1 @Input() hero: Hero; @Output() deleted = new EventEmitter(); // #enddocregion input-output-1 onDelete() { this.deleted.emit(this.hero); } }