
p.location-badge.
  exported from <a href='../core'>angular2/core</a>
  defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.37/modules/angular2/src/core/compiler/dynamic_component_loader.ts#L58-L257">angular2/src/core/compiler/dynamic_component_loader.ts (line 58)</a>

:markdown
  Service for dynamically loading a Component into an arbitrary position in the internal Angular
  application tree.
  
  

.l-main-section
  h2 Annotations
  .l-sub-section
    h3.annotation Injectable
    pre.prettyprint
      code.
        @Injectable()


.l-main-section
  h2 Members
  .l-sub-section
    h3#constructor constructor

    
    pre.prettyprint
      code.
        constructor(_compiler: Compiler, _viewManager: AppViewManager)
    
    :markdown




  .l-sub-section
    h3#loadAsRoot loadAsRoot

    
    pre.prettyprint
      code.
        loadAsRoot(typeOrBinding: Type | Binding, overrideSelector: string, injector: Injector, onDispose?: () =&gt; void)
    
    :markdown
      Loads a root component that is placed at the first element that matches the component's
      selector.
      
      - `typeOrBinding` `Type` \ <a href='Binding-class.html'><code>Binding</code></a> - representing the component to load.
      - `overrideSelector` (optional) selector to load the component at (or use
        `@Component.selector`) The selector can be anywhere (i.e. outside the current component.)
      - `injector` <a href='Injector-class.html'><code>Injector</code></a> - optional injector to use for the component.
      
      The loaded component receives injection normally as a hosted view.
      
      
      
      
      ```
      @ng.Component({
        selector: 'child-component'
      })
      @ng.View({
        template: 'Child'
      })
      class ChildComponent {
      }
      
      
      
      @ng.Component({
        selector: 'my-app'
      })
      @ng.View({
        template: `
          Parent (<child id="child"></child>)
        `
      })
      class MyApp {
        constructor(dynamicComponentLoader: ng.DynamicComponentLoader, injector: ng.Injector) {
          dynamicComponentLoader.loadAsRoot(ChildComponent, '#child', injector);
        }
      }
      
      ng.bootstrap(MyApp);
      ```
      
      Resulting DOM:
      
      ```
      <my-app>
        Parent (
          <child id="child">
             Child
          </child>
        )
      </my-app>
      ```
      
      





  .l-sub-section
    h3#loadIntoLocation loadIntoLocation

    
    pre.prettyprint
      code.
        loadIntoLocation(typeOrBinding: Type | Binding, hostLocation: ElementRef, anchorName: string, bindings?: ResolvedBinding[])
    
    :markdown
      Loads a component into the component view of the provided ElementRef next to the element
      with the given name.
      
      The loaded component receives injection normally as a hosted view.
      
      
      
      ```
      @ng.Component({
        selector: 'child-component'
      })
      @ng.View({
        template: 'Child'
      })
      class ChildComponent {
      }
      
      
      @ng.Component({
        selector: 'my-app'
      })
      @ng.View({
        template: `
          Parent (<div #child></div>)
        `
      })
      class MyApp {
        constructor(dynamicComponentLoader: ng.DynamicComponentLoader, elementRef: ng.ElementRef) {
          dynamicComponentLoader.loadIntoLocation(ChildComponent, elementRef, 'child');
        }
      }
      
      ng.bootstrap(MyApp);
      ```
      
      Resulting DOM:
      
      ```
      <my-app>
         Parent (
           <div #child="" class="ng-binding"></div>
           <child-component class="ng-binding">Child</child-component>
         )
      </my-app>
      ```
      
      





  .l-sub-section
    h3#loadNextToLocation loadNextToLocation

    
    pre.prettyprint
      code.
        loadNextToLocation(typeOrBinding: Type | Binding, location: ElementRef, bindings?: ResolvedBinding[])
    
    :markdown
      Loads a component next to the provided ElementRef.
      
      The loaded component receives injection normally as a hosted view.
      
      
      
      
      ```
      @ng.Component({
        selector: 'child-component'
      })
      @ng.View({
        template: 'Child'
      })
      class ChildComponent {
      }
      
      
      @ng.Component({
        selector: 'my-app'
      })
      @ng.View({
        template: `Parent`
      })
      class MyApp {
        constructor(dynamicComponentLoader: ng.DynamicComponentLoader, elementRef: ng.ElementRef) {
          dynamicComponentLoader.loadIntoLocation(ChildComponent, elementRef, 'child');
        }
      }
      
      ng.bootstrap(MyApp);
      ```
      
      Resulting DOM:
      
      ```
      <my-app>Parent</my-app>
      <child-component>Child</child-component>
      ```
      
      




