References
Oleksa Novyk | GitHub

@Component

This is the documentation for Angular 6.
You can switch to the latest version Angular 9.

Components are the most basic UI building block of an Angular app.

Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.

A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the declarations field of the @NgModule metadata.

Example

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

@Component({
  selector: 'my-component',
  template: `Hello there!`
})
export class MyComponent {
...
}

Options

Inherited from Directive decorator

changeDetection#

changeDetection: ChangeDetectionStrategy

The change-detection strategy to use for this component.

When a component is instantiated, Angular creates a change detector, which is responsible for propagating the component's bindings. The strategy is one of:

  • ChangeDetectionStrategy#OnPush sets the strategy to CheckOnce (on demand).
  • ChangeDetectionStrategy#Default sets the strategy to CheckAlways.

viewProviders#

viewProviders: Provider[]

Defines the set of injectable objects that are visible to its view DOM children.

moduleId#

moduleId: string

The module ID of the module that contains the component. The component must be able to resolve relative URLs for templates and styles. SystemJS exposes the __moduleName variable within each module. In CommonJS, this can be set to module.id.

templateUrl#

templateUrl: string

The URL of a template file for an Angular component. If provided, do not supply an inline template using template.

template#

template: string

An inline template for an Angular component. If provided, do not supply a template file using templateUrl.

styleUrls#

styleUrls: string[]

One or more URLs for files containing CSS stylesheets to use in this component.

styles#

styles: string[]

One or more inline CSS stylesheets to use in this component.

animations#

animations: any[]

One or more animation trigger() calls, containing state() and transition() definitions.

encapsulation#

encapsulation: ViewEncapsulation

An encapsulation policy for the template and CSS styles. One of:

  • ViewEncapsulation.Native: Use shadow roots. This works only if natively available on the platform.
  • ViewEncapsulation.Emulated: Use shimmed CSS that emulates the native behavior.
  • ViewEncapsulation.None: Use global CSS without any encapsulation.

If not supplied, the value is taken from CompilerOptions. The default compiler option is ViewEncapsulation.Emulated.

If the policy is set to ViewEncapsulation.Emulated and the component has no styles or styleUrls specified, the policy is automatically switched to ViewEncapsulation.None.

interpolation#

interpolation: [string, string]

Overrides the default encapsulation start and end delimiters ({{ and }})

entryComponents#

entryComponents: Array<Type<any> | any[]>

A set of components that should be compiled along with this component. For each component listed here, Angular creates a ComponentFactory and stores it in the ComponentFactoryResolver.

preserveWhitespaces#

preserveWhitespaces: boolean

True to preserve or false to remove potentially superfluous whitespace characters from the compiled template. Whitespace characters are those matching the \s character class in JavaScript regular expressions. Default is false, unless overridden in compiler options.