References
Oleksa Novyk | GitHub

@Component

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

animations#

animations?: any[]

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

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.

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.

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.

interpolation#

interpolation?: [string, string]

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

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.

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.

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.

template#

template?: string

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

templateUrl#

templateUrl?: string

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

viewProviders#

viewProviders?: Provider[]

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