[Angular] Using ngTemplateOutlet to create dynamic template

I can use <tamplete> syntax and a entry component as a container to create a dynamic component. Notice it will create a empty div as a placeholder in the DOM. If we don't wanner this empty div, we can actually using ng-conainer together with ngTemplateOutlet (for template ref) and ngTemplateOutletContext (the context).

 

import { Component, TemplateRef, ComponentRef, ViewContainerRef, ViewChild, AfterContentInit, ComponentFactoryResolver } from '@angular/core';

import { AuthFormComponent } from './auth-form/auth-form.component';

import { User } from './auth-form/auth-form.interface';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <div #entry></div>
      <template #tmpl let-obj let-location="location">
          <details>
            <summary>{{obj.name}}</summary>
            <p> - Age: {{obj.age}}</p>
            <p> - Address :{{location}}</p>
          </details>
      </template>
      <hr />
      <ng-container 
      [ngTemplateOutlet]="tmpl"
      [ngTemplateOutletContext]="ctx"
      ></ng-container>
    </div>
  `
})
export class AppComponent implements AfterContentInit {

  @ViewChild('entry', { read: ViewContainerRef }) entry: ViewContainerRef;
  @ViewChild('tmpl') tmpl: TemplateRef<any>;

  ctx = {
    $implicit: {
      name: 'John',
      age: 34
    },
    location: 'USA'
  }

  ngAfterContentInit() {
    this.entry.createEmbeddedView(this.tmpl, {
      $implicit: {
        name: 'Zhentian',
        age: 27
      },
      location: 'China'
    })
  }

}

 

 

And in the generated DOM we can see that there is no empty div created.