Angular 10 References/ Core


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.


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

  selector: 'my-component',
  template: `Hello there!`
export class MyComponent {


Inherited from Directive decorator


animations?: any[]
One or more animation `trigger()` calls, containing `state()` and `transition()` definitions.


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?: 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?: 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?: [string, string]
Overrides the default encapsulation start and end delimiters (`{{` and `}}`)


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 ``.


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?: string[]
One or more URLs for files containing CSS stylesheets to use in this component.


styles?: string[]
One or more inline CSS stylesheets to use in this component.


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


templateUrl?: string
The URL of a template file for an Angular component. If provided, do not supply an inline template using `template`.


viewProviders?: Provider[]
Defines the set of injectable objects that are visible to its view DOM children.