This is the archived documentation for Angular v5. Please visit angular.io to see documentation for the current version of Angular.

NgComponentOutlet

npm Package @angular/common
Module import { NgComponentOutlet } from '@angular/common';
Source common/src/directives/ng_component_outlet.ts

Overview

      
      @Directive({ selector: '[ngComponentOutlet]' })
class NgComponentOutlet implements OnChanges, OnDestroy {
  ngComponentOutlet: Type<any>
  ngComponentOutletInjector: Injector
  ngComponentOutletContent: any[][]
  ngComponentOutletNgModuleFactory: NgModuleFactory<any>
  ngOnChanges(changes: SimpleChanges)
  ngOnDestroy()
}

Selectors

      
      [ngComponentOutlet]

Inputs

ngComponentOutlet bound to NgComponentOutlet.ngComponentOutlet
ngComponentOutletInjector bound to NgComponentOutlet.ngComponentOutletInjector
ngComponentOutletContent bound to NgComponentOutlet.ngComponentOutletContent
ngComponentOutletNgModuleFactory bound to NgComponentOutlet.ngComponentOutletNgModuleFactory

Description

Instantiates a single Component type and inserts its Host View into current View. NgComponentOutlet provides a declarative approach for dynamic component creation.

NgComponentOutlet requires a component type, if a falsy value is set the view will clear and any existing component will get destroyed.

Fine tune control

You can control the component creation process by using the following optional attributes:

  • ngComponentOutletInjector: Optional custom Injector that will be used as parent for the Component. Defaults to the injector of the current view container.

  • ngComponentOutletContent: Optional list of projectable nodes to insert into the content section of the component, if exists.

  • ngComponentOutletNgModuleFactory: Optional module factory to allow dynamically loading other module, then load a component from that module.

Syntax

Simple

      
      <ng-container *ngComponentOutlet="componentTypeExpression"></ng-container>

Customized injector/content

      
      <ng-container *ngComponentOutlet="componentTypeExpression;
                                  injector: injectorExpression;
                                  content: contentNodesExpression;">
</ng-container>

Customized ngModuleFactory

      
      <ng-container *ngComponentOutlet="componentTypeExpression;
                                  ngModuleFactory: moduleFactory;">
</ng-container>

Example

      
      @Component({selector: 'hello-world', template: 'Hello World!'})
class HelloWorld {
}

@Component({
  selector: 'ng-component-outlet-simple-example',
  template: `<ng-container *ngComponentOutlet="HelloWorld"></ng-container>`
})
class NgTemplateOutletSimpleExample {
  // This field is necessary to expose HelloWorld to the template.
  HelloWorld = HelloWorld;
}

A more complete example with additional options:

      
      @Injectable()
class Greeter {
  suffix = '!';
}

@Component({
  selector: 'complete-component',
  template: `Complete: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}`
})
class CompleteComponent {
  constructor(public greeter: Greeter) {}
}

@Component({
  selector: 'ng-component-outlet-complete-example',
  template: `
    <ng-container *ngComponentOutlet="CompleteComponent; 
                                      injector: myInjector; 
                                      content: myContent"></ng-container>`
})
class NgTemplateOutletCompleteExample {
  // This field is necessary to expose CompleteComponent to the template.
  CompleteComponent = CompleteComponent;
  myInjector: Injector;

  myContent = [[document.createTextNode('Ahoj')], [document.createTextNode('Svet')]];

  constructor(injector: Injector) {
    this.myInjector = ReflectiveInjector.resolveAndCreate([Greeter], injector);
  }
}

A more complete example with ngModuleFactory:

      
      @Component({selector: 'other-module-component', template: `Other Module Component!`})
class OtherModuleComponent {
}

@Component({
  selector: 'ng-component-outlet-other-module-example',
  template: `
    <ng-container *ngComponentOutlet="OtherModuleComponent;
                                      ngModuleFactory: myModule;"></ng-container>`
})
class NgTemplateOutletOtherModuleExample {
  // This field is necessary to expose OtherModuleComponent to the template.
  OtherModuleComponent = OtherModuleComponent;
  myModule: NgModuleFactory<any>;

  constructor(compiler: Compiler) { this.myModule = compiler.compileModuleSync(OtherModule); }
}

Constructor

      
      constructor(_viewContainerRef: ViewContainerRef)

Members

      
      ngComponentOutlet: Type<any>
    
      
      ngComponentOutletInjector: Injector
    
      
      ngComponentOutletContent: any[][]
    
      
      ngComponentOutletNgModuleFactory: NgModuleFactory<any>
    
      
      ngOnChanges(changes: SimpleChanges)
    
      
      ngOnDestroy()