Angular Tabs - Use only one component

Question

I'm a beginner in angular and need to create some tabs. I found a very interesting example, but I am not able to implement everything in the same component and without the tab component template.

Is there any way to pass all the content from the component tab to the component app?

DEMO

I intend this code (tab component) to be transferred to the app component and all the html code in the template will be transferred to app.component.html. is it possible to implement this?

Thank you.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'tabs',
  template: `
    <mat-tab-group>
      <ng-container *ngFor="let tab of tabsName">
        <mat-tab label="{{ tab.name }}">
          <ng-container [ngTemplateOutlet]='tab.template'></ng-container>
        </mat-tab>
      </ng-container>
    </mat-tab-group>
    <ng-content></ng-content>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class TabComponent  {
  @Input() tabsName: any;

  onSelect(event){
    console.log(this.tabsName[0].name)
  }
}

Michael D Michael D · Accepted Answer · 2020-02-24T15:34:23

If you wish to copy the entire content to app component, do so by replacing the input variable with a local variable.

App component template:

<mat-tab-group>
  <ng-container *ngFor="let tab of allTabs">
    <mat-tab label="{{ tab.name }}">
      <ng-container [ngTemplateOutlet]='tab.template'></ng-container>
    </mat-tab>
  </ng-container>
</mat-tab-group>
<ng-content></ng-content>

<ng-template #Shop>
  <form>
    name: <input type="text">
  </form>
</ng-template>
<ng-template #Notification>
  <h1>list of notification</h1>
</ng-template>
<ng-template #Review>
  <h1>list of review</h1>
</ng-template>

I've modified your Stackblitz to remove tab component.

Angular Tabs - Use only one component

2 Answers