Angular 12 References/ Templates
🍀 Angular References

ngComponentOutlet directive

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 {
  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.
class Greeter {
  suffix = '!';
  selector: 'complete-component',
  template: `Complete: <ng-content></ng-content> <ng-content></ng-content>{{ greeter.suffix }}`
class CompleteComponent {
  constructor(public greeter: Greeter) {}
  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);
Links & Tutorials