ComponentMetadata

export class ComponentMetadata

exported from angular2/core defined in angular2/src/core/metadata/directives.ts (line 759)

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, and which properties and hostListeners it binds to.

When a component is instantiated, Angular

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

For details on the @View annotation, see ViewMetadata.

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.

Example

@Component({selector: 'greet', template: 'Hello {{name}}!', directives: [CustomDirective]}) class Greet { name: string = 'World'; }

Constructor

constructor({selector, inputs, outputs, properties, events, host, exportAs, moduleId, bindings,
             providers, viewBindings, viewProviders,
             changeDetection = ChangeDetectionStrategy.Default, queries, templateUrl, template,
             styleUrls, styles, directives, pipes, encapsulation}?: {
  selector?: string,
  inputs?: string[],
  outputs?: string[],
  properties?: string[],
  events?: string[],
  host?: {[key: string]: string},
  /** @deprecated */ bindings?: any[],
  providers?: any[],
  exportAs?: string,
  moduleId?: string,
  /** @deprecated */ viewBindings?: any[],
  viewProviders?: any[],
  queries?: {[key: string]: any},
  changeDetection?: ChangeDetectionStrategy,
  templateUrl?: string,
  template?: string,
  styleUrls?: string[],
  styles?: string[],
  directives?: Array<Type | any[]>,
  pipes?: Array<Type | any[]>,
  encapsulation?: ViewEncapsulation
})

Not Yet Documented

Members

changeDetection : ChangeDetectionStrategy

Defines the used change detection strategy.

When a component is instantiated, Angular creates a change detector, which is responsible for propagating the component's bindings.

The changeDetection property defines, whether the change detection will be checked every time or only when the component tells it to do so.

viewProviders : any[]

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

Simple Example

Here is an example of a class that can be injected:

class Greeter { greet(name:string) { return 'Hello ' + name + '!'; } } @Directive({ selector: 'needs-greeter' }) class NeedsGreeter { greeter:Greeter; constructor(greeter:Greeter) { this.greeter = greeter; } } @Component({ selector: 'greet', viewProviders: [ Greeter ], template: `<needs-greeter></needs-greeter>`, directives: [NeedsGreeter] }) class HelloWorld { } 

viewBindings : any[]

Not Yet Documented

moduleId : string

The module id of the module that contains the component. Needed to be able to resolve relative urls for templates and styles. In Dart, this can be determined automatically and does not need to be set. In CommonJS, this can always be set to module.id.

Simple Example

@Directive({ selector: 'someDir', moduleId: module.id }) class SomeDir { } 

templateUrl : string

Not Yet Documented

template : string

Not Yet Documented

styleUrls : string[]

Not Yet Documented

styles : string[]

Not Yet Documented

directives : Array<Type | any[]>

Not Yet Documented

pipes : Array<Type | any[]>

Not Yet Documented

encapsulation : ViewEncapsulation

Not Yet Documented