Instantiates a single Componenttype and inserts its Host View into current View. NgComponentOutlet provides a declarative approach for dynamic component creation.
You can control the component creation process by using the following optional attributes:
ngComponentOutletInjector: Optional custom Injectorthat 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.
@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); } }
