As a newcomer to angular, I am trying to create tabs. I came across an intriguing example, but I am struggling to incorporate everything into the same component without using the tab component template.
Is there a way to transfer all the content from the tab component to the app component?
I would like to move the code (tab component) to the app component and transfer all the HTML code in the template to app.component.html. Could this be done successfully?
Appreciate your help.
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)
}
}