{ "id": "api/common/NgComponentOutlet", "title": "NgComponentOutlet", "contents": "\n\n
\n
\n
\n \n API > @angular/common\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

NgComponentOutletlink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

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

\n\n

See more...

\n
\n \n \n \n \n\n

NgModulelink

\n\n\n\n \n
\n

Selectorslink

\n \n \n \n
\n\n\n\n \n\n
\n

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n @Input()
ngComponentOutlet: Type<any>\n 		\n \n \n \n
\n \n @Input()
ngComponentOutletInjector: Injector\n 		\n \n \n \n
\n \n @Input()
ngComponentOutletContent: any[][]\n 		\n \n \n \n
\n \n @Input()
ngComponentOutletNgModuleFactory: NgModuleFactory<any>\n 		\n \n \n \n
\n
\n\n\n\n \n\n\n \n
\n

Descriptionlink

\n

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

\n\n

Fine tune controllink

\n

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

\n
    \n
  • \n

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

    \n
    • \n
  • \n

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

    \n
    • \n
  • \n

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

    \n
    • \n
\n

Syntaxlink

\n

Simple

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

Customized injector/content

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

Customized ngModuleFactory

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

A simple examplelink

\n\n@Component({selector: 'hello-world', template: 'Hello World!'})\nexport class HelloWorld {\n}\n\n@Component({\n selector: 'ng-component-outlet-simple-example',\n template: `<ng-container *ngComponentOutlet=\"HelloWorld\"></ng-container>`\n})\nexport class NgComponentOutletSimpleExample {\n // This field is necessary to expose HelloWorld to the template.\n HelloWorld = HelloWorld;\n}\n\n\n

A more complete example with additional options:

\n\n@Injectable()\nexport class Greeter {\n suffix = '!';\n}\n\n@Component({\n selector: 'complete-component',\n template: `Complete: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}`\n})\nexport class CompleteComponent {\n constructor(public greeter: Greeter) {}\n}\n\n@Component({\n selector: 'ng-component-outlet-complete-example',\n template: `\n <ng-container *ngComponentOutlet=\"CompleteComponent;\n injector: myInjector;\n content: myContent\"></ng-container>`\n})\nexport class NgComponentOutletCompleteExample {\n // This field is necessary to expose CompleteComponent to the template.\n CompleteComponent = CompleteComponent;\n myInjector: Injector;\n\n myContent = [[document.createTextNode('Ahoj')], [document.createTextNode('Svet')]];\n\n constructor(injector: Injector) {\n this.myInjector =\n Injector.create({providers: [{provide: Greeter, deps: []}], parent: injector});\n }\n}\n\n\n\n
\n \n\n \n\n \n\n \n\n
\n

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n ngOnChanges()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n ngOnChanges(changes: SimpleChanges)\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n changes\n SimpleChanges\n \n \n
\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n ngOnDestroy()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n ngOnDestroy()\n\n \n\n
Parameters
\n

There are no parameters.

\n\n \n\n\n \n\n \n
\n
\n\n \n
\n\n \n \n \n\n
\n
\n\n\n" }