ngComponentOutlet directive
This is the documentation for Angular 6.
You can switch to the latest version Angular 10.
You can switch to the latest version Angular 10.
Instantiates a single Component type and inserts its Host View into current View. NgComponentOutlet
provides a declarative approach for dynamic component creation.
@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;
}
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.
@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);
}
}