Angular 6 References/ Core
References
Oleksa Novyk | GitHub

@Component

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

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.