@Directive({
  selector: '[appForbiddenName]',
  providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
})
export class ForbiddenValidatorDirective implements Validator {
  @Input('appForbiddenName') forbiddenName = '';

  validate(control: AbstractControl): ValidationErrors | null {
    return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
                              : null;
  }
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

@Input() childItem = '';
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

@Input() items: Item[] = [];
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

export class ProductAlertsComponent implements OnInit {

  @Input() product!: Product;
  constructor() { }

  ngOnInit() {
  }

}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">ProductAlertsComponent</span></code></pre>

@Component({
  selector: 'toh-hero',
  template: `...`
})
export class HeroComponent {
  @Input() id?: string;

  process() {
    if (this.id) {
      // ...
    }
  }
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

export class HeroComponent {
  @Output() savedTheDay = new EventEmitter<boolean>();
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">HeroComponent</span></code></pre>

/* avoid */

@Component({
  selector: 'toh-hero',
  template: `...`
})
export class HeroComponent {
  @Output() onSavedTheDay = new EventEmitter<boolean>();
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

@Component({
  selector: 'app-zippy',
  template: `
    <div class="zippy">
      <div (click)="toggle()">Toggle</div>
      <div [hidden]="!visible">
        <ng-content></ng-content>
      </div>
    </div>
  `,
})
export class ZippyComponent {
  visible = true;
  @Output() open = new EventEmitter<any>();
  @Output() close = new EventEmitter<any>();

  toggle() {
    this.visible = !this.visible;
    if (this.visible) {
      this.open.emit(null);
    } else {
      this.close.emit(null);
    }
  }
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

export class ProductAlertsComponent {
  @Input() product: Product | undefined;
  @Output() notify = new EventEmitter();
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">ProductAlertsComponent</span></code></pre>

export class SizerComponent {

  @Input()  size!: number | string;
  @Output() sizeChange = new EventEmitter<number>();

  dec() { this.resize(-1); }
  inc() { this.resize(+1); }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">SizerComponent</span></code></pre>

import { Attribute, Component } from '@angular/core';

@Component({
  selector: 'app-my-input-with-attribute-decorator',
  template: '<p>The type of the input is: {{ type }}</p>'
})
export class MyInputWithAttributeDecoratorComponent {
  constructor(@Attribute('type') public type: string) { }
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">interface</span> <span class="token class-name">Attribute</span>
<span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">const</span> Attribute<span class="token operator">:</span> AttributeDecorator
<span class="token keyword">import</span> Attribute</code><div class="typing-tooltip-markup">Type of the Attribute metadata.
Attribute decorator and metadata.<br><br><em>@publicApi</em><br><br><em>@Annotation</em><br><br><em>@publicApi</em></div></pre>

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

@Component({
  selector: 'async-observable-pipe',
  template: `<div><code>observable|async</code>:
       Time: {{ time | async }}</div>`
})
export class AsyncObservablePipeComponent {
  time = new Observable<string>(observer => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

@Component({
  selector: 'toh-hero-list',
  template: `
    <section>
      Our list of heroes:
      <toh-hero *ngFor="let hero of heroes" [hero]="hero">
      </toh-hero>
      Total powers: {{totalPowers}}<br>
      Average power: {{avgPower}}
    </section>
  `
})
export class HeroListComponent {
  heroes: Hero[];
  totalPowers = 0;

  get avgPower() {
    return this.totalPowers / this.heroes.length;
  }
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

import { Directive } from '@angular/core';

@Directive({
  selector: '[tohValidator2]',
  host: {
    '[attr.role]': 'role',
    '(mouseenter)': 'onMouseEnter()'
  }
})
export class Validator2Directive {
  role = 'button';
  onMouseEnter() {
    // do work
  }
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">interface</span> <span class="token class-name">Directive</span>
<span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">const</span> Directive<span class="token operator">:</span> DirectiveDecorator
<span class="token keyword">import</span> Directive</code><div class="typing-tooltip-markup">Directive decorator and metadata.
Type of the Directive metadata.<br><br><em>@Annotation</em><br><br><em>@publicApi</em><br><br><em>@publicApi</em></div></pre>

/* avoid */

@Directive({
  selector: '[validate]'
})
export class ValidateDirective {}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

import { Directive } from '@angular/core';

@Directive({
  selector: '[appItem]'
})
export class ItemDirective {
// code goes here
  constructor() { }

}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">interface</span> <span class="token class-name">Directive</span>
<span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">const</span> Directive<span class="token operator">:</span> DirectiveDecorator
<span class="token keyword">import</span> Directive</code><div class="typing-tooltip-markup">Directive decorator and metadata.
Type of the Directive metadata.<br><br><em>@Annotation</em><br><br><em>@publicApi</em><br><br><em>@publicApi</em></div></pre>

@Directive({
  selector: '[tohHighlight]'
})
export class HighlightDirective {
  @HostListener('mouseover') onMouseEnter() {
    // do highlight work
  }
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

@Directive({
  selector: '[tohValidate]'
})
export class ValidateDirective {}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

import { Attribute, Component } from '@angular/core';

@Component({
  selector: 'app-my-input-with-attribute-decorator',
  template: '<p>The type of the input is: {{ type }}</p>'
})
export class MyInputWithAttributeDecoratorComponent {
  constructor(@Attribute('type') public type: string) { }
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">interface</span> <span class="token class-name">Attribute</span>
<span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">const</span> Attribute<span class="token operator">:</span> AttributeDecorator
<span class="token keyword">import</span> Attribute</code><div class="typing-tooltip-markup">Type of the Attribute metadata.
Attribute decorator and metadata.<br><br><em>@publicApi</em><br><br><em>@Annotation</em><br><br><em>@publicApi</em></div></pre>