javascriptangularng-templateng-container

Injecting component to ng-container? (load ng-template from file)


I'm trying to build a simple tabs-menu in my Angular app.

parant.component.html:

<div>
  <button (click)="selectTab(1)">Tab1</button>
  <button (click)="selectTab(2)">Tab2</button>

  <ng-container *ngTemplateOutlet="(selected == 1) ? template1 : template2">
  </ng-container>

  <ng-template #template1>I'm page 1</ng-template>
  <ng-template #template2>I'm page 2</ng-template>
</div>

parant.component.ts:

public selected = 1;
public selectTab(tabName) {
  this.selected = tabName;
}

This is working fine, as long as the <ng-template> is part on the same page html. Now my pages (the content of #template1 and #template2) become complex and I want to move them to separate components.

How could I inject component into <ng-container>??


Solution

  • To inject a Component into <ng-container>, you didn't need to use *ngTemplateOutlet, instead use *ngComponentOutlet.

    You can see the full API at: NgComponentOutlet

    tab1.component.html:

    <p>tab1 works!</p>
    

    tab2.component.html:

    <p>tab2 works!</p>
    

    parent.component.html:

    <div>
      <button (click)="selectTab(1)">Tab1</button>
      <button (click)="selectTab(2)">Tab2</button>
    
      <ng-container *ngComponentOutlet="activeTab">
      </ng-container>
    </div>
    

    parant.component.ts:

    import { Tab1Component } from './tab1.component';
    import { Tab2Component } from './tab2.component';
    ...
    
    public activeTab = Tab1Component;
    
    public selectTab(tabName) {
      if (tabName == 1) {
        this.activeTab = Tab1Component ;
      }
      else if (tabName == 2) {
        this.activeTab = Tab2Component ;
      }  
    }
    

    And don't forget to add these dynamic components to the entryComponents section.

    app.module.ts:

    import { Tab1Component } from './tab1.component';
    import { Tab2Component } from './tab2.component';
    ...
    @NgModule({
      ...
      entryComponents: [
        Tab1Component,
        Tab2Component,
        ...