@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() items: Item[] = [];
<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>

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: 'app-hero',
  template: '<div>{{hero.name}}</div>'
})
export class HeroComponent {
  @Input() hero: Hero;
}
<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>

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>

@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>

/* 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>

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 { 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>

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>

/* 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>

@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>

class MyComponent {
  constructor(@Optional() other: OtherComponent) {}

  @ContentChild(OtherComponent)
  other: OtherComponent|null;
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">MyComponent</span></code></pre>

constructor(@Optional() config?: UserServiceConfig) {
  if (config) { this._userName = config.userName; }
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

constructor(@Optional() @SkipSelf() parentModule?: GreetingModule) {
  if (parentModule) {
    throw new Error(
      'GreetingModule is already loaded. Import it in the AppModule only');
  }
}
<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>

@Component({
  selector: 'app-nav-bar',
  template: `
<nav [style]='navStyle'>
  <a [style.text-decoration]="activeLinkStyle">Home Page</a>
  <a [style.text-decoration]="linkStyle">Login</a>
</nav>`
})
export class NavBarComponent {
  navStyle = 'font-size: 1.2rem; color: cornflowerblue;';
  linkStyle = 'underline';
  activeLinkStyle = 'overline';
  /* . . . */
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

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

import { Hero, HeroService } from '../shared';

@Component({
  selector: 'toh-hero-list',
  template: `...`
})
export class HeroListComponent implements OnInit {
  heroes: Hero[] = [];
  constructor(private heroService: HeroService) {}
  getHeroes() {
    this.heroes = [];
    this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);
  }
  ngOnInit() {
    this.getHeroes();
  }
}
<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">Component</span>
<span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">const</span> Component<span class="token operator">:</span> ComponentDecorator
<span class="token keyword">import</span> Component</code><div class="typing-tooltip-markup">Supplies configuration metadata for an Angular component.
Component decorator and metadata.<br><br><em>@publicApi</em><br><br><em>@Annotation</em><br><br><em>@publicApi</em></div></pre>

@Component({
  selector: 'toh-hero'
})
export class HeroComponent {}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

// BAD CODE - title is private
@Component({
  selector: 'app-root',
  template: '<h1>{{title}}</h1>'
})
export class AppComponent {
  private title = 'My App'; // Bad
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>