From bfd13c06e18ccceb2c8cc4eefc46194d6e0b1ef0 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Thu, 30 Jul 2020 13:03:21 +0300 Subject: [PATCH] refactor(docs-infra): fix docs examples for Angular-specific tslint rules (#38143) This commit updates the docs examples to be compatible with the following Angular-specific tslint rules: - `component-selector` - `directive-selector` - `no-conflicting-lifecycle` - `no-host-metadata-property` - `no-input-rename` - `no-output-native` - `no-output-rename` This is in preparation of updating the docs examples `tslint.json` to match the one generated for new Angular CLI apps in a future commit. PR Close #38143 --- .../accessibility/src/app/progress-bar.component.ts | 1 + .../src/app/comp-with-host-binding.component.ts | 12 ++++++------ .../src/app/hero-child.component.ts | 2 +- .../src/app/parent-finder.component.ts | 6 ++---- .../src/app/ad-banner.component.ts | 2 +- .../dynamic-component-loader/src/app/ad.directive.ts | 3 ++- .../examples/elements/src/app/popup.component.ts | 6 ++---- .../event-binding/src/app/click.directive.ts | 2 +- .../src/app/hero-tax-return.component.ts | 1 + .../src/app/aliasing/aliasing.component.ts | 7 +------ .../examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts | 2 +- .../lifecycle-hooks/src/app/counter.component.ts | 2 +- .../lifecycle-hooks/src/app/peek-a-boo.component.ts | 2 ++ .../lifecycle-hooks/src/app/spy.component.html | 2 +- .../lifecycle-hooks/src/app/spy.directive.ts | 4 ++-- .../examples/observables-in-angular/src/main.ts | 5 +++-- .../02-08/app/shared/input-highlight.directive.ts | 1 + .../app/heroes/shared/hero-highlight.directive.ts | 1 + .../src/06-03/app/shared/validator2.directive.ts | 1 + aio/content/examples/testing/src/app/demo/demo.ts | 2 +- .../testing/src/app/shared/highlight.directive.ts | 1 + .../src/testing/router-link-directive-stub.ts | 2 +- .../a-to-ajs-transclusion/hero-detail.component.ts | 1 + .../src/app/upgrade-io/hero-detail.component.ts | 1 + .../src/app/upgrade-static/hero-detail.component.ts | 1 + aio/content/guide/dynamic-component-loader.md | 4 ++-- aio/content/guide/observables-in-angular.md | 2 +- 27 files changed, 40 insertions(+), 36 deletions(-) diff --git a/aio/content/examples/accessibility/src/app/progress-bar.component.ts b/aio/content/examples/accessibility/src/app/progress-bar.component.ts index fe1f5d8c73..f8ae4662d4 100755 --- a/aio/content/examples/accessibility/src/app/progress-bar.component.ts +++ b/aio/content/examples/accessibility/src/app/progress-bar.component.ts @@ -1,3 +1,4 @@ +// tslint:disable: no-host-metadata-property // #docregion progressbar-component import { Component, Input } from '@angular/core'; diff --git a/aio/content/examples/attribute-binding/src/app/comp-with-host-binding.component.ts b/aio/content/examples/attribute-binding/src/app/comp-with-host-binding.component.ts index f41c3d4278..b93c478f6b 100644 --- a/aio/content/examples/attribute-binding/src/app/comp-with-host-binding.component.ts +++ b/aio/content/examples/attribute-binding/src/app/comp-with-host-binding.component.ts @@ -1,16 +1,16 @@ -import { Component } from '@angular/core'; +import { Component, HostBinding } from '@angular/core'; @Component({ selector: 'comp-with-host-binding', template: 'I am a component!', - host: { - '[class.special]': 'isSpecial', - '[style.color]': 'color', - '[style.width]': 'width' - } }) export class CompWithHostBindingComponent { + @HostBinding('class.special') isSpecial = false; + + @HostBinding('style.color') color = 'green'; + + @HostBinding('style.width') width = '200px'; } diff --git a/aio/content/examples/component-interaction/src/app/hero-child.component.ts b/aio/content/examples/component-interaction/src/app/hero-child.component.ts index 4a0b8d4229..d36ffdeeb1 100644 --- a/aio/content/examples/component-interaction/src/app/hero-child.component.ts +++ b/aio/content/examples/component-interaction/src/app/hero-child.component.ts @@ -12,6 +12,6 @@ import { Hero } from './hero'; }) export class HeroChildComponent { @Input() hero: Hero; - @Input('master') masterName: string; + @Input('master') masterName: string; // tslint:disable-line: no-input-rename } // #enddocregion diff --git a/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts index 054c1f9cf0..18df7ddae0 100644 --- a/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts +++ b/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts @@ -1,5 +1,4 @@ -/* tslint:disable: no-unused-variable component-selector-name one-line space-before-function-paren */ -/* tslint:disable:*/ +/* tslint:disable: no-unused-variable component-selector one-line space-before-function-paren */ // #docplaster // #docregion import { Component, forwardRef, Optional, SkipSelf } from '@angular/core'; @@ -20,8 +19,7 @@ const DifferentParent = Parent; // The `parentType` defaults to `Parent` when omitting the second parameter. // #docregion provide-the-parent export function provideParent -// #enddocregion provide-parent, provide-the-parent -// #docregion provide-parent +// #enddocregion provide-the-parent (component: any, parentType?: any) { return { provide: parentType || Parent, useExisting: forwardRef(() => component) }; } diff --git a/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts b/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts index 7e686be87a..989bc87b46 100644 --- a/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts +++ b/aio/content/examples/dynamic-component-loader/src/app/ad-banner.component.ts @@ -11,7 +11,7 @@ import { AdComponent } from './ad.component'; template: `

Advertisements

- +
` // #enddocregion ad-host diff --git a/aio/content/examples/dynamic-component-loader/src/app/ad.directive.ts b/aio/content/examples/dynamic-component-loader/src/app/ad.directive.ts index 312e605228..0b47467c88 100644 --- a/aio/content/examples/dynamic-component-loader/src/app/ad.directive.ts +++ b/aio/content/examples/dynamic-component-loader/src/app/ad.directive.ts @@ -1,8 +1,9 @@ +// tslint:disable: directive-selector // #docregion import { Directive, ViewContainerRef } from '@angular/core'; @Directive({ - selector: '[ad-host]', + selector: '[adHost]', }) export class AdDirective { constructor(public viewContainerRef: ViewContainerRef) { } diff --git a/aio/content/examples/elements/src/app/popup.component.ts b/aio/content/examples/elements/src/app/popup.component.ts index a2383ba69a..45fe6ef647 100644 --- a/aio/content/examples/elements/src/app/popup.component.ts +++ b/aio/content/examples/elements/src/app/popup.component.ts @@ -1,6 +1,6 @@ // tslint:disable: variable-name // #docregion -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core'; import { animate, state, style, transition, trigger } from '@angular/animations'; @Component({ @@ -9,9 +9,6 @@ import { animate, state, style, transition, trigger } from '@angular/animations' Popup: {{message}} `, - host: { - '[@state]': 'state', - }, animations: [ trigger('state', [ state('opened', style({transform: 'translateY(0%)'})), @@ -41,6 +38,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations' `] }) export class PopupComponent { + @HostBinding('@state') state: 'opened' | 'closed' = 'closed'; @Input() diff --git a/aio/content/examples/event-binding/src/app/click.directive.ts b/aio/content/examples/event-binding/src/app/click.directive.ts index 4e9e9085b1..a04863fac8 100644 --- a/aio/content/examples/event-binding/src/app/click.directive.ts +++ b/aio/content/examples/event-binding/src/app/click.directive.ts @@ -1,4 +1,4 @@ -/* tslint:disable use-output-property-decorator directive-class-suffix */ +// tslint:disable: directive-selector import { Directive, ElementRef, EventEmitter, Output } from '@angular/core'; @Directive({selector: '[myClick]'}) diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts index cbca85946a..9ee6325b2e 100644 --- a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts +++ b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts @@ -1,3 +1,4 @@ +// tslint:disable: no-output-native // #docregion import { Component, EventEmitter, Input, Output } from '@angular/core'; import { HeroTaxReturn } from './hero'; diff --git a/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts b/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts index 8eed8bddbd..c150bcc214 100644 --- a/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts +++ b/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts @@ -1,9 +1,4 @@ -/* tslint:disable:use-input-property-decorator */ -/* tslint:disable:use-output-property-decorator */ - -/* tslint:disable:no-input-rename */ - - +// tslint:disable: no-input-rename no-output-rename use-input-property-decorator use-output-property-decorator import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ diff --git a/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts b/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts index 8aa8ee9f29..6ec9eb2e63 100644 --- a/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts @@ -135,7 +135,7 @@ describe('Lifecycle hooks', () => { const inputEle = element(by.css('spy-parent input')); const addHeroButtonEle = element(by.cssContainingText('spy-parent button', 'Add Hero')); const resetHeroesButtonEle = element(by.cssContainingText('spy-parent button', 'Reset Heroes')); - const heroEles = element.all(by.css('spy-parent div[mySpy')); + const heroEles = element.all(by.css('spy-parent div[appSpy')); const logEles = element.all(by.css('spy-parent h4 ~ div')); expect(heroEles.count()).toBe(2, 'should have two heroes displayed'); diff --git a/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts b/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts index cddc847136..a2d7b5fd9b 100644 --- a/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts +++ b/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts @@ -13,7 +13,7 @@ import { LoggerService } from './logger.service'; Counter = {{counter}}
-- Counter Change Log --
-
{{chg}}
+
{{chg}}
`, styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}'] diff --git a/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts index a597a5ca73..c66e41a6c9 100644 --- a/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts +++ b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts @@ -1,3 +1,5 @@ +// tslint:disable: no-conflicting-lifecycle +// #docregion import { AfterContentChecked, AfterContentInit, diff --git a/aio/content/examples/lifecycle-hooks/src/app/spy.component.html b/aio/content/examples/lifecycle-hooks/src/app/spy.component.html index f7deae9448..96ca78194a 100644 --- a/aio/content/examples/lifecycle-hooks/src/app/spy.component.html +++ b/aio/content/examples/lifecycle-hooks/src/app/spy.component.html @@ -7,7 +7,7 @@

-
+
{{hero}}
diff --git a/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts b/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts index 01f3f95880..c14f4e6455 100644 --- a/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts +++ b/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts @@ -7,8 +7,8 @@ let nextId = 1; // #docregion spy-directive // Spy on any element to which it is applied. -// Usage:
...
-@Directive({selector: '[mySpy]'}) +// Usage:
...
+@Directive({selector: '[appSpy]'}) export class SpyDirective implements OnInit, OnDestroy { constructor(private logger: LoggerService) { } diff --git a/aio/content/examples/observables-in-angular/src/main.ts b/aio/content/examples/observables-in-angular/src/main.ts index 0ba6e38f54..0eaca6bc62 100644 --- a/aio/content/examples/observables-in-angular/src/main.ts +++ b/aio/content/examples/observables-in-angular/src/main.ts @@ -1,11 +1,12 @@ - +// tslint:disable: no-output-native +// #docregion import { Component, Output, OnInit, EventEmitter, NgModule } from '@angular/core'; import { Observable } from 'rxjs'; // #docregion eventemitter @Component({ - selector: 'zippy', + selector: 'app-zippy', template: `
Toggle
diff --git a/aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts b/aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts index fd74771981..13f8bc1e98 100644 --- a/aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts +++ b/aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts @@ -1,3 +1,4 @@ +// tslint:disable: directive-selector // #docregion import { Directive, ElementRef } from '@angular/core'; diff --git a/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts index 737af31f4f..3af48d241e 100644 --- a/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts +++ b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts @@ -1,3 +1,4 @@ +// tslint:disable: directive-selector // #docregion import { Directive, ElementRef, Input, OnChanges } from '@angular/core'; diff --git a/aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts b/aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts index 05a0f9f07f..dc61f4e504 100644 --- a/aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts +++ b/aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts @@ -1,3 +1,4 @@ +// tslint:disable: no-host-metadata-property // #docregion import { Directive } from '@angular/core'; diff --git a/aio/content/examples/testing/src/app/demo/demo.ts b/aio/content/examples/testing/src/app/demo/demo.ts index e97ccb387c..5c02167ea3 100644 --- a/aio/content/examples/testing/src/app/demo/demo.ts +++ b/aio/content/examples/testing/src/app/demo/demo.ts @@ -1,4 +1,4 @@ -/* tslint:disable:forin */ +// tslint:disable: directive-selector forin no-input-rename import { Component, ContentChildren, Directive, EventEmitter, Injectable, Input, Output, Optional, HostBinding, HostListener, diff --git a/aio/content/examples/testing/src/app/shared/highlight.directive.ts b/aio/content/examples/testing/src/app/shared/highlight.directive.ts index ce851d70d0..465c39cd09 100644 --- a/aio/content/examples/testing/src/app/shared/highlight.directive.ts +++ b/aio/content/examples/testing/src/app/shared/highlight.directive.ts @@ -1,3 +1,4 @@ +// tslint:disable: directive-selector // #docregion import { Directive, ElementRef, Input, OnChanges } from '@angular/core'; diff --git a/aio/content/examples/testing/src/testing/router-link-directive-stub.ts b/aio/content/examples/testing/src/testing/router-link-directive-stub.ts index 4da6f8fd04..ea89f67ab9 100644 --- a/aio/content/examples/testing/src/testing/router-link-directive-stub.ts +++ b/aio/content/examples/testing/src/testing/router-link-directive-stub.ts @@ -3,7 +3,7 @@ import { Directive, Input, HostListener } from '@angular/core'; // export for convenience. export { RouterLink} from '@angular/router'; -/* tslint:disable:directive-class-suffix */ +// tslint:disable: directive-class-suffix directive-selector // #docregion router-link @Directive({ selector: '[routerLink]' diff --git a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts index 9d467a5411..f8292434f2 100644 --- a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts +++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts @@ -1,3 +1,4 @@ +// tslint:disable: directive-selector // #docregion export const heroDetail = { bindings: { diff --git a/aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts index 4d74a1bea1..451507dda8 100644 --- a/aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts +++ b/aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts @@ -1,3 +1,4 @@ +// tslint:disable: directive-selector // #docregion // #docregion hero-detail-io export const heroDetail = { diff --git a/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts index 959ff16b01..3b81dc6be2 100644 --- a/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts +++ b/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts @@ -1,3 +1,4 @@ +// tslint:disable: directive-selector // #docregion // #docregion hero-detail export const heroDetail = { diff --git a/aio/content/guide/dynamic-component-loader.md b/aio/content/guide/dynamic-component-loader.md index 37a693f43c..94ec37fbc4 100644 --- a/aio/content/guide/dynamic-component-loader.md +++ b/aio/content/guide/dynamic-component-loader.md @@ -42,7 +42,7 @@ mark valid insertion points in the template. `AdDirective` injects `ViewContainerRef` to gain access to the view container of the element that will host the dynamically added component. -In the `@Directive` decorator, notice the selector name, `ad-host`; +In the `@Directive` decorator, notice the selector name, `adHost`; that's what you use to apply the directive to the element. The next section shows you how. @@ -56,7 +56,7 @@ decorator's `template` property as a template string. The `` element is where you apply the directive you just made. To apply the `AdDirective`, recall the selector from `ad.directive.ts`, -`ad-host`. Apply that to `` without the square brackets. Now Angular knows +`[adHost]`. Apply that to `` without the square brackets. Now Angular knows where to dynamically load components. diff --git a/aio/content/guide/observables-in-angular.md b/aio/content/guide/observables-in-angular.md index d4f31ab32d..a12030410e 100644 --- a/aio/content/guide/observables-in-angular.md +++ b/aio/content/guide/observables-in-angular.md @@ -14,7 +14,7 @@ When you call `emit()`, it passes the emitted value to the `next()` method of an A good example of usage can be found in the [EventEmitter](api/core/EventEmitter) documentation. Here is the example component that listens for open and close events: -`` +`` Here is the component definition: