Component class Templates & Directives

Declare reusable UI building blocks for an application.

Each Angular component requires a single @Component annotation. The @Component annotation specifies when a component is instantiated.

When a component is instantiated, Angular

  • creates a shadow DOM for the component,
  • loads the selected template into the shadow DOM and
  • creates all the injectable objects configured with providers and viewProviders.

All template expressions and statements are then evaluated against the component instance.

Lifecycle hooks

When the component class implements some lifecycle-hooks the callbacks are called by the change detection at defined points in time during the life of the component.

Inheritance
Annotations
  • @Target.new({TargetKind.classType})

Constructors

Component({required String selector, String? exportAs, List<Object> providers = const [], Visibility visibility = Visibility.local, List<Object> viewProviders = const [], List<Object?> exports = const [], int changeDetection = ChangeDetectionStrategy.Default, String? templateUrl, String? template, bool preserveWhitespace = false, List<String> styleUrls = const [], List<String> styles = const [], List<Object> directives = const [], List<Typed<Object>> directiveTypes = const [], List<Object> pipes = const [], ViewEncapsulation encapsulation = ViewEncapsulation.Emulated})
const

Properties

changeDetection → int
Defines the used change detection strategy.
final
directives → List<Object>
A list of directives that can be used within this component's template.
final
directiveTypes → List<Typed<Object>>
Declares generic type arguments for any generic directives.
final
encapsulation → ViewEncapsulation
Controls how this component's styles are scoped to the DOM.
final
exportAs → String?
A name that can be used in the template to assign this directive to a variable.
finalinherited
exports → List<Object?>
A list of identifiers that may be referenced in the template.
final
hashCode → int
The hash code for this object.
no setterinherited
pipes → List<Object>
A list of pipes that can be used within this component's template.
final
preserveWhitespace → bool
Removes all whitespace except &ngsp; and &nbsp; from template if set to false.
final
providers → List<Object>
The set of injectable objects that are visible to the directive and its light DOM children.
finalinherited
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
selector → String
The CSS selector that triggers the instantiation of the directive.
finalinherited
styles → List<String>
A list of inline CSS styles to apply to this component.
final
styleUrls → List<String>
A list of URLs of external CSS/SCSS stylesheets to apply to this component.
final
template → String?
An inline HTML template for this component.
final
templateUrl → String?
The URL of an external template file.
final
viewProviders → List<Object>
Defines the set of injectable objects that are visible to its view DOM children.
final
visibility → Visibility
Whether this directive will be provided for injection.
finalinherited

Methods

noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() → String
A string representation of this object.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited