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: '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>

@Component({
  selector: 'app-shadow-dom-encapsulation',
  template: `
    <h2>ShadowDom</h2>
    <div class="shadow-message">Shadow DOM encapsulation</div>
    <app-emulated-encapsulation></app-emulated-encapsulation>
    <app-no-encapsulation></app-no-encapsulation>
  `,
  styles: ['h2, .shadow-message { color: blue; }'],
  encapsulation: ViewEncapsulation.ShadowDom,
})
export class ShadowDomEncapsulationComponent { }
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-routable',
  template: 'Routable2Component template'
})
export class Routable2Component implements OnInit {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.url
      .subscribe(url => console.log('The URL changed to: ' + url));
  }
}
<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">class</span> <span class="token class-name">ActivatedRoute</span>
<span class="token keyword">import</span> ActivatedRoute</code><div class="typing-tooltip-markup">Provides access to information about a route associated with a component
that is loaded in an outlet.
Use to traverse the <code>RouterState</code> tree and extract information from nodes.

The following example shows how to construct a component using information from a
currently activated route.

Note: the observables in this class only emit when the current and previous values differ based
on shallow equality. For example, changing deeply nested properties in resolved <code>data</code> will not
cause the <code>ActivatedRoute.data</code> <code>Observable</code> to emit a new value.

{@example router/activated-route/module.ts region="activated-route"
<pre class="code poetry"><code>header=&quot;activated-route.component.ts&quot;}</code></pre><em>@see</em> —  <a href="guide/router#getting-route-information">Getting route information</a><br><br><em>@publicApi</em></div></pre>

@Component({
  selector: 'my-component',
  template: '<span *ngIf="person"> {{person.address.street}} </span>'
})
class MyComponent {
  person?: Person;
}
<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>

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

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>

const template = '<div>{{hero.name}}</div>';

@Component({
  selector: 'app-hero',
  template: template + '<div>{{hero.title}}</div>'
})
export class HeroComponent {
  @Input() hero: Hero;
}
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> template<span class="token operator">:</span> <span class="token string">"&lt;div>{{hero.name}}&lt;/div>"</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 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>

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>

import angular from 'angular';

import 'angular-translate';
import '@ovh-ux/ui-kit';
import '@ovh-ux/ng-translate-async-loader';

import component from './dedicatedCloud-security-kms-add.component';

const moduleName = 'ovhManagerPccSecurityKmsAdd';

angular
  .module(moduleName, [
    'ngTranslateAsyncLoader',
    'oui',
    'pascalprecht.translate',
  ])
  .component(component.name, component)
  .run(/* @ngTranslationsInject:json ./translations */);

export default moduleName;
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">import</span> angular</code></pre>

import angular from 'angular';

import 'angular-translate';
import '@ovh-ux/ui-kit';
import '@ovh-ux/ng-translate-async-loader';

import component from './dedicatedCloud-security-kms-edit.component';

const moduleName = 'ovhManagerPccSecurityKmsEdit';

angular
  .module(moduleName, [
    'ngTranslateAsyncLoader',
    'oui',
    'pascalprecht.translate',
  ])
  .component(component.name, component)
  .run(/* @ngTranslationsInject:json ./translations */);

export default moduleName;
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">import</span> angular</code></pre>

import angular from 'angular';

import 'angular-translate';
import '@ovh-ux/ui-kit';
import '@ovh-ux/ng-translate-async-loader';

import component from './dedicatedCloud-security-session-timeout-update.component';

const moduleName = 'ovhManagerPccSecuritySessionTimeoutUpdate';

angular
  .module(moduleName, [
    'ngTranslateAsyncLoader',
    'oui',
    'pascalprecht.translate',
  ])
  .component(component.name, component)
  .run(/* @ngTranslationsInject:json ./translations */);

export default moduleName;
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">import</span> angular</code></pre>

import angular from 'angular';
import '@uirouter/angularjs';

import routing from './snapshot-restore.routing';
import component from './snapshot-restore.component';

const moduleName = 'vpsDashboardSnapshotRestoreModule';

angular
  .module(moduleName, ['ui.router'])
  .config(routing)
  .component('vpsDashboardSnapshotRestore', component)
  .run(/* @ngTranslationsInject:json ./translations */);

export default moduleName;
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">import</span> angular</code></pre>

import angular from 'angular';
import '@uirouter/angularjs';

import routing from './vps-monitoring-sla.routing';
import component from './vps-monitoring-sla.component';

const moduleName = 'vpsDashboardMonitoringSlaModule';

angular
  .module(moduleName, ['ui.router'])
  .config(routing)
  .component('vpsDashboardMonitoringSla', component)
  .run(/* @ngTranslationsInject:json ./translations */);

export default moduleName;
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">import</span> angular</code></pre>

import angular from 'angular';
import '@uirouter/angularjs';

import routing from './vps-mount.routing';
import component from './vps-mount.component';

const moduleName = 'vpsVeeamMountModule';

angular
  .module(moduleName, ['ui.router'])
  .config(routing)
  .component('vpsVeeamMount', component)
  .run(/* @ngTranslationsInject:json ./translations */);

export default moduleName;
<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">import</span> angular</code></pre>