Incorporating Angular Material tabs into my Angular 5 project has been quite the challenge. I am attempting to use the tabs as a submenu on a links page, where numerous links are categorized into smaller sections that will be displayed when selected from the tab group.
To display each tab, I have implemented an ngFor loop and structured the set of links within an unordered list using another ngFor loop. However, despite the tab group functioning correctly, the list of links fails to appear.
After researching similar issues, it seems that most were resolved by adding the BrowserAnimationsModule, which I already have imported into my project.
Here is the HTML code snippet:
<mat-tab-group>
<mat-tab *ngFor="let tab of linkMenu" label="{{tab.dispName}}">
<div class="tab-content">
<ul>
<li *ngFor="let link of tab.varName"><a href="link.url">{{link.name}}</a></li>
</ul>
</div>
</mat-tab>
</mat-tab-group>
And here is the associated TypeScript code:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-resources',
templateUrl: './resources.component.html',
styleUrls: ['./resources.component.less']
})
export class ResourcesComponent implements OnInit {
linkMenu = [
{dispName: "Link Set A", varName: "linksA"},
{dispName: "Link Set B", varName: "linksB"},
{dispName: "Link Set C", varName: "linksC"},
{dispName: "Link Set D", varName: "linksD"},
]
linksA = [
{name: "foo1",url: ""},
{name: "bar1",url: ""},
{name: "spam1",url: ""},
{name: "eggs1",url: ""}
]
linksB = [
{name: "foo2",url: ""},
{name: "bar2",url: ""},
{name: "spam2",url: ""},
{name: "eggs2",url: ""}
]
linksC = [
{name: "foo3",url: ""},
{name: "bar3",url: ""},
{name: "spam3",url: ""},
{name: "eggs3",url: ""}
]
linksD = [
{name: "foo4",url: ""},
{name: "bar4",url: ""},
{name: "spam4",url: ""},
{name: "eggs4",url: ""}
]
constructor() { }
ngOnInit() {
}
}