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
This commit is contained in:
George Kalpakas
Alex Rickabaugh
parent
5303773daf
commit
bfd13c06e1
|
|
@ -1,3 +1,4 @@
|
|||
// tslint:disable: no-host-metadata-property
|
||||
// #docregion progressbar-component
|
||||
import { Component, Input } from '@angular/core';
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) };
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { AdComponent } from './ad.component';
|
|||
template: `
|
||||
<div class="ad-banner-example">
|
||||
<h3>Advertisements</h3>
|
||||
<ng-template ad-host></ng-template>
|
||||
<ng-template adHost></ng-template>
|
||||
</div>
|
||||
`
|
||||
// #enddocregion ad-host
|
||||
|
|
|
|||
|
|
@ -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) { }
|
||||
|
|
|
|||
|
|
@ -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'
|
|||
<span>Popup: {{message}}</span>
|
||||
<button (click)="closed.next()">✖</button>
|
||||
`,
|
||||
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()
|
||||
|
|
|
|||
|
|
@ -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]'})
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// tslint:disable: no-output-native
|
||||
// #docregion
|
||||
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
||||
import { HeroTaxReturn } from './hero';
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { LoggerService } from './logger.service';
|
|||
Counter = {{counter}}
|
||||
|
||||
<h5>-- Counter Change Log --</h5>
|
||||
<div *ngFor="let chg of changeLog" mySpy>{{chg}}</div>
|
||||
<div *ngFor="let chg of changeLog" appSpy>{{chg}}</div>
|
||||
</div>
|
||||
`,
|
||||
styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}']
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
// tslint:disable: no-conflicting-lifecycle
|
||||
// #docregion
|
||||
import {
|
||||
AfterContentChecked,
|
||||
AfterContentInit,
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<p></p>
|
||||
<!-- #docregion template -->
|
||||
<div *ngFor="let hero of heroes" mySpy class="heroes">
|
||||
<div *ngFor="let hero of heroes" appSpy class="heroes">
|
||||
{{hero}}
|
||||
</div>
|
||||
<!-- #enddocregion template -->
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ let nextId = 1;
|
|||
|
||||
// #docregion spy-directive
|
||||
// Spy on any element to which it is applied.
|
||||
// Usage: <div mySpy>...</div>
|
||||
@Directive({selector: '[mySpy]'})
|
||||
// Usage: <div appSpy>...</div>
|
||||
@Directive({selector: '[appSpy]'})
|
||||
export class SpyDirective implements OnInit, OnDestroy {
|
||||
|
||||
constructor(private logger: LoggerService) { }
|
||||
|
|
|
|||
|
|
@ -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: `
|
||||
<div class="zippy">
|
||||
<div (click)="toggle()">Toggle</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// tslint:disable: directive-selector
|
||||
// #docregion
|
||||
import { Directive, ElementRef } from '@angular/core';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// tslint:disable: directive-selector
|
||||
// #docregion
|
||||
import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// tslint:disable: no-host-metadata-property
|
||||
// #docregion
|
||||
import { Directive } from '@angular/core';
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// tslint:disable: directive-selector
|
||||
// #docregion
|
||||
import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
|
||||
|
||||
|
|
|
|||
|
|
@ -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]'
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// tslint:disable: directive-selector
|
||||
// #docregion
|
||||
export const heroDetail = {
|
||||
bindings: {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// tslint:disable: directive-selector
|
||||
// #docregion
|
||||
// #docregion hero-detail-io
|
||||
export const heroDetail = {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// tslint:disable: directive-selector
|
||||
// #docregion
|
||||
// #docregion hero-detail
|
||||
export const heroDetail = {
|
||||
|
|
|
|||
|
|
@ -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 `<ng-template>` 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 `<ng-template>` without the square brackets. Now Angular knows
|
||||
`[adHost]`. Apply that to `<ng-template>` without the square brackets. Now Angular knows
|
||||
where to dynamically load components.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
`<zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>`
|
||||
`<app-zippy (open)="onOpen($event)" (close)="onClose($event)"></app-zippy>`
|
||||
|
||||
Here is the component definition:
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue