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

parantponent.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>

parantponent.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) bee plex and I want to move them to separate ponents.

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

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

parant.ponent.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.ponent.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) bee plex and I want to move them to separate ponents.

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

• javascript
• angular
• ng-template
• ng-container

2 Answers 2

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.ponent.html:

<p>tab1 works!</p>

tab2.ponent.html:

<p>tab2 works!</p>

parent.ponent.html:

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

  <ng-container *ngComponentOutlet="activeTab">
  </ng-container>
</div>

parant.ponent.ts:

import { Tab1Component } from './tab1.ponent';
import { Tab2Component } from './tab2.ponent';
...

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 ponents to the entryComponents section.

app.module.ts:

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

pnent-templet1 and pnent-templet2 is name of ponent which previously was in ng-templet now you put them in ponent*

 <ul>
            <li *ngFor='let link of links'>
                <ng-container 
                     [ngTemplateOutlet]="link.type == 'plex' ?plexLink : simpleLink" 
                     [ngTemplateOutletContext]="{link:link}">
                </ng-container>
            </li>
        </ul>

        <ng-template #simpleLink let-link='link'>
            Simple : {{ link.name }}
    <pnent-templet2 [input]="link.somevalue"></pnent-templet2>
        </ng-template>

        <ng-template #plexLink let-link='link'>
            Complex : {{ link.name }}
    <pnent-templet1 [input]="link.somevalue"></pnent-templet1>