// #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: `
`, 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