angular-cn/public/docs/js/latest/api/annotations/ComponentAnnotation-class.jade

p.location-badge.
  exported from <a href='../annotations'>angular2/annotations</a>
  defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/core/annotations_impl/annotations.ts#L776-L1009">angular2/src/core/annotations_impl/annotations.ts (line 776)</a>

:markdown
  Declare reusable UI building blocks for an application.
  
  Each Angular component requires a single `@Component` and at least one `@View` annotation. The
  `@Component`
  annotation specifies when a component is instantiated, and which properties and hostListeners it
  binds to.
  
  When a component is instantiated, Angular
  - creates a shadow DOM for the component.
  - loads the selected template into the shadow DOM.
  - creates a child <a href='../di/Injector-class.html'><code>Injector</code></a> which is configured with the `appInjector` for the
  <a href='Component-var.html'><code>Component</code></a>.
  
  All template expressions and statements are then evaluated against the component instance.
  
  For details on the `@View` annotation, see <a href='View-var.html'><code>View</code></a>.
  
  ## Example
  
  ```
  @Component({
    selector: 'greet'
  })
  @View({
    template: 'Hello {{name}}!'
  })
  class Greet {
    name: string;
  
    constructor() {
      this.name = 'World';
    }
  }
  ```
  
  
  Dynamically loading a component at runtime:
  
  Regular Angular components are statically resolved. Dynamic components allows to resolve a
  component at runtime
  instead by providing a placeholder into which a regular Angular component can be dynamically
  loaded. Once loaded,
  the dynamically-loaded component becomes permanent and cannot be changed.
  Dynamic components are declared just like components, but without a `@View` annotation.
  
  
  ## Example
  
  Here we have `DynamicComp` which acts as the placeholder for `HelloCmp`. At runtime, the dynamic
  component
  `DynamicComp` requests loading of the `HelloCmp` component.
  
  There is nothing special about `HelloCmp`, which is a regular Angular component. It can also be
  used in other static
  locations.
  
  ```
  @Component({
    selector: 'dynamic-comp'
  })
  class DynamicComp {
    helloCmp:HelloCmp;
    constructor(loader:DynamicComponentLoader, location:ElementRef) {
      loader.load(HelloCmp, location).then((helloCmp) => {
        this.helloCmp = helloCmp;
      });
    }
  }
  
  @Component({
    selector: 'hello-cmp'
  })
  @View({
    template: "{{greeting}}"
  })
  class HelloCmp {
    greeting:string;
    constructor() {
      this.greeting = "hello";
    }
  }
  ```
  
  
.l-main-section
  h2 Members
  .l-sub-section
    h3 constructor

    
    pre.prettyprint
      code.
        constructor({selector, properties, events, hostListeners, hostProperties, hostAttributes,
                   hostActions, appInjector, lifecycle, hostInjector, viewInjector,
                   changeDetection = DEFAULT, compileChildren = true}: {
        selector?: string,
        properties?: List&lt;string&gt;,
        events?: List&lt;string&gt;,
        hostListeners?: StringMap&lt;string, string&gt;,
        hostProperties?: StringMap&lt;string, string&gt;,
        hostAttributes?: StringMap&lt;string, string&gt;,
        hostActions?: StringMap&lt;string, string&gt;,
        appInjector?: List&lt;any&gt;,
        lifecycle?: List&lt;LifecycleEvent&gt;,
        hostInjector?: List&lt;any&gt;,
        viewInjector?: List&lt;any&gt;,
        changeDetection?: string,
        compileChildren?: boolean
      } = {})
    
    :markdown
      
      




  .l-sub-section
    h3 appInjector

    
    :markdown

      Defines the set of injectable objects that are visible to a Component and its children.
      
      The `appInjector` defined in the Component annotation allow you to configure a set of bindings
      for the component's
      injector.
      
      When a component is instantiated, Angular creates a new child Injector, which is configured
      with the bindings in
      the Component `appInjector` annotation. The injectable objects then become available for
      injection to the component
      itself and any of the directives in the component's template, i.e. they are not available to
      the directives which
      are children in the component's light DOM.
      
      
      The syntax for configuring the `appInjector` injectable is identical to <a href='../di/Injector-class.html'><code>Injector</code></a>
      injectable configuration.
      See <a href='../di/Injector-class.html'><code>Injector</code></a> for additional detail.
      
      
      ## Simple Example
      
      Here is an example of a class that can be injected:
      
      ```
      class Greeter {
         greet(name:string) {
           return 'Hello ' + name + '!';
         }
      }
      
      @Component({
        selector: 'greet',
        appInjector: [
          Greeter
        ]
      })
      @View({
        template: `{{greeter.greet('world')}}!`,
        directives: [Child]
      })
      class HelloWorld {
        greeter:Greeter;
      
        constructor(greeter:Greeter) {
          this.greeter = greeter;
        }
      }
      ```
      
      





  .l-sub-section
    h3 changeDetection

    
    :markdown

      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.
      
      





  .l-sub-section
    h3 viewInjector

    
    :markdown

      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',
        viewInjector: [
          Greeter
        ]
      })
      @View({
        template: `<needs-greeter></needs-greeter>`,
        directives: [NeedsGreeter]
      })
      class HelloWorld {
      }
      
      ```