Angular 10 References/ Core
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.