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

NgComponentOutlet

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

See more...

NgModule

Selectors

Properties

Property Description
@Input()
ngComponentOutlet: Type<any>
@Input()
ngComponentOutletInjector: Injector
@Input()
ngComponentOutletContent: any[][]
@Input()
ngComponentOutletNgModuleFactory: NgModuleFactory<any>

Description

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:

Syntax

Simple

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

Customized injector/content

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

Customized ngModuleFactory

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

A simple 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; }
      
      @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); } }
      
      @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); } }
      
      @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); }
}
    

Methods

ngOnChanges(changes: SimpleChanges)
      
      ngOnChanges(changes: SimpleChanges)
    

Parameters

changes

Type: SimpleChanges.

ngOnDestroy()
      
      ngOnDestroy()
    

Parameters

There are no parameters.