diff --git a/public/docs/_examples/architecture/ts/app/hero-list.component.ts b/public/docs/_examples/architecture/ts/app/hero-list.component.ts index 8e4ca9b1ae..d7bc9e75d9 100644 --- a/public/docs/_examples/architecture/ts/app/hero-list.component.ts +++ b/public/docs/_examples/architecture/ts/app/hero-list.component.ts @@ -24,13 +24,13 @@ export class HeroesComponent { ... } */ // #docregion class export class HeroListComponent implements OnInit { + heroes: Hero[]; + selectedHero: Hero; + // #docregion ctor constructor(private service: HeroService) { } // #enddocregion ctor - heroes: Hero[]; - selectedHero: Hero; - ngOnInit() { this.heroes = this.service.getHeroes(); } diff --git a/public/docs/_examples/architecture/ts/app/hero.service.ts b/public/docs/_examples/architecture/ts/app/hero.service.ts index d5df3bdf31..027d4bfc6a 100644 --- a/public/docs/_examples/architecture/ts/app/hero.service.ts +++ b/public/docs/_examples/architecture/ts/app/hero.service.ts @@ -7,14 +7,14 @@ import { Logger } from './logger.service'; @Injectable() // #docregion class export class HeroService { + private heroes: Hero[] = []; + // #docregion ctor constructor( private backend: BackendService, private logger: Logger) { } // #enddocregion ctor - private heroes: Hero[] = []; - getHeroes() { this.backend.getAll(Hero).then( (heroes: Hero[]) => { this.logger.log(`Fetched ${heroes.length} heroes.`); diff --git a/public/docs/_examples/architecture/ts/app/sales-tax.service.ts b/public/docs/_examples/architecture/ts/app/sales-tax.service.ts index f0d5457342..5bf505548a 100644 --- a/public/docs/_examples/architecture/ts/app/sales-tax.service.ts +++ b/public/docs/_examples/architecture/ts/app/sales-tax.service.ts @@ -1,5 +1,5 @@ // #docregion -import { Inject, Injectable } from '@angular/core'; +import { Injectable } from '@angular/core'; import { TaxRateService } from './tax-rate.service'; diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts index f8c1a95ea1..4cacc0d22e 100644 --- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts +++ b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.1.ts @@ -1,3 +1,4 @@ +/* tslint:disable:no-unused-variable */ // #docregion import { Directive, ElementRef, Input } from '@angular/core'; diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts index d6b295fae2..3baf3449fb 100644 --- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts +++ b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts @@ -1,14 +1,10 @@ +/* tslint:disable:no-unused-variable */ +// #docplaster // #docregion -import { Directive, ElementRef, Input } from '@angular/core'; +import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ - selector: '[myHighlight]', - // #docregion host - host: { - '(mouseenter)': 'onMouseEnter()', - '(mouseleave)': 'onMouseLeave()' - } - // #enddocregion host + selector: '[myHighlight]' }) export class HighlightDirective { @@ -18,9 +14,19 @@ export class HighlightDirective { constructor(el: ElementRef) { this.el = el.nativeElement; } // #enddocregion ctor - // #docregion mouse-methods - onMouseEnter() { this.highlight('yellow'); } - onMouseLeave() { this.highlight(null); } + // #docregion mouse-methods, host + @HostListener('mouseenter') onMouseEnter() { + // #enddocregion host + this.highlight('yellow'); + // #docregion host + } + + @HostListener('mouseleave') onMouseLeave() { + // #enddocregion host + this.highlight(null); + // #docregion host + } + // #enddocregion host private highlight(color: string) { this.el.style.backgroundColor = color; diff --git a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts index 09a762a892..cd6c7870a1 100644 --- a/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts +++ b/public/docs/_examples/attribute-directives/ts/app/highlight.directive.ts @@ -1,13 +1,9 @@ // #docplaster // #docregion full -import { Directive, ElementRef, Input } from '@angular/core'; +import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ - selector: '[myHighlight]', - host: { - '(mouseenter)': 'onMouseEnter()', - '(mouseleave)': 'onMouseLeave()' - } + selector: '[myHighlight]' }) // #docregion class-1 export class HighlightDirective { @@ -29,9 +25,13 @@ export class HighlightDirective { // #enddocregion color // #docregion mouse-enter - onMouseEnter() { this.highlight(this.highlightColor || this._defaultColor); } + @HostListener('mouseenter') onMouseEnter() { + this.highlight(this.highlightColor || this._defaultColor); + } // #enddocregion mouse-enter - onMouseLeave() { this.highlight(null); } + @HostListener('mouseleave') onMouseLeave() { + this.highlight(null); + } private highlight(color: string) { this.el.style.backgroundColor = color; diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts index c04e64247d..e1421fa530 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/date.pipe.ts @@ -1,10 +1,10 @@ -import { Injectable, Pipe } from '@angular/core'; +import { Injectable, Pipe, PipeTransform } from '@angular/core'; import { DatePipe } from '@angular/common'; @Injectable() // #docregion date-pipe @Pipe({name: 'date', pure: true}) -export class StringSafeDatePipe extends DatePipe { +export class StringSafeDatePipe extends DatePipe implements PipeTransform { transform(value: any, format: string): string { value = typeof value === 'string' ? Date.parse(value) : value; diff --git a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts index 286615b95c..4157d8aa3a 100644 --- a/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts +++ b/public/docs/_examples/cb-a1-a2-quick-reference/ts/app/movie-list.component.ts @@ -1,3 +1,4 @@ +/* tslint:disable:no-unused-variable */ // #docplaster // #docregion import import { Component } from '@angular/core'; diff --git a/public/docs/_examples/cb-component-communication/ts/app/app.component.ts b/public/docs/_examples/cb-component-communication/ts/app/app.component.ts index 332d8f7f0f..891b5c86ac 100644 --- a/public/docs/_examples/cb-component-communication/ts/app/app.component.ts +++ b/public/docs/_examples/cb-component-communication/ts/app/app.component.ts @@ -25,7 +25,7 @@ if (!/e2e/.test(location.search)) { } @Component({ - selector: 'app', + selector: 'my-app', templateUrl: 'app/app.component.html', directives: directives }) diff --git a/public/docs/_examples/cb-component-communication/ts/index.html b/public/docs/_examples/cb-component-communication/ts/index.html index 51adcdaf23..4afa076c19 100644 --- a/public/docs/_examples/cb-component-communication/ts/index.html +++ b/public/docs/_examples/cb-component-communication/ts/index.html @@ -23,7 +23,7 @@
-