CODEWITHSUNDEEP
angulartypescriptangular-material
Paul Th.
Paul Th.

Reputation: 187

Angular Tabs - Use only one component

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)
  }
}

Upvotes: 2

Views: 2443

Answers (2)

Vasiliy Mazhekin
Vasiliy Mazhekin

Reputation: 688

Try to use more simple and flexible angular-tabs. https://www.npmjs.com/package/@codehint-ng/tabs

Upvotes: 0

Barremian
Barremian

Reputation: 31105

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.

Upvotes: 1

Related Questions