directive
Instantiates a single Component
type and inserts its Host View into current View. NgComponentOutlet
provides a declarative approach for dynamic component creation.
Property | Description |
---|---|
@Input()ngComponentOutlet: Type<any> | |
@Input()ngComponentOutletInjector: Injector | |
@Input()ngComponentOutletContent: any[][] | |
@Input()ngComponentOutletNgModuleFactory: NgModuleFactory<any> |
NgComponentOutlet
requires a component type, if a falsy value is set the view will clear and any existing component will get 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 exists.
ngComponentOutletNgModuleFactory
: Optional module factory to allow dynamically loading other module, then load a component from that module.
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>
@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}); } }
ngOnChanges() |
---|
ngOnDestroy() |
---|
|
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/api/common/NgComponentOutlet