directive
Instantiates a Component
type and inserts its Host View into the current View. NgComponentOutlet
provides a declarative approach for dynamic component creation.
Property | Description |
---|---|
@Input()ngComponentOutlet: Type<any> | null | |
@Input()ngComponentOutletInjector?: Injector | |
@Input()ngComponentOutletContent?: any[][] | |
@Input()ngComponentOutletNgModule?: Type<any> | |
@Input()ngComponentOutletNgModuleFactory?: NgModuleFactory<any> | Deprecated This input is deprecated, use |
NgComponentOutlet
requires a component type, if a falsy value is set the view will clear and any existing component will be destroyed.
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 it exists.
ngComponentOutletNgModule
: Optional NgModule class reference to allow loading another module dynamically, then loading a component from that module.
ngComponentOutletNgModuleFactory
: Deprecated config option that allows providing optional NgModule factory to allow loading another module dynamically, then loading a component from that module. Use ngComponentOutletNgModule
instead.
Simple
<ng-container *ngComponentOutlet="componentTypeExpression"></ng-container>
Customized injector/content
<ng-container *ngComponentOutlet="componentTypeExpression; injector: injectorExpression; content: contentNodesExpression;"> </ng-container>
Customized NgModule reference
<ng-container *ngComponentOutlet="componentTypeExpression; ngModule: ngModuleClass;"> </ng-container>
@Component({selector: 'hello-world', template: 'Hello World!'}) export class HelloWorld { } @Component({ selector: 'ng-component-outlet-simple-example', template: `<ng-container *ngComponentOutlet="HelloWorld"></ng-container>` }) export class NgComponentOutletSimpleExample { // This field is necessary to expose HelloWorld to the template. HelloWorld = HelloWorld; }
A more complete example with additional options:
@Injectable() export class Greeter { suffix = '!'; } @Component({ selector: 'complete-component', template: `Complete: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}` }) export class CompleteComponent { constructor(public greeter: Greeter) {} } @Component({ selector: 'ng-component-outlet-complete-example', template: ` <ng-container *ngComponentOutlet="CompleteComponent; injector: myInjector; content: myContent"></ng-container>` }) export class NgComponentOutletCompleteExample { // 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 = Injector.create({providers: [{provide: Greeter, deps: []}], parent: injector}); } }
© 2010–2022 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/api/common/NgComponentOutlet