Angular Material Tab (mat-tab) not showing content

Question

I am using Angular Material tabs with Angular 5. I want to use the tabs as a submenu on a links page. There are a lot of links that I need to display, so I have broken them into smaller sections that will display when selected from the tab group.

I am displaying each tab using an ngFor and then displaying the set of links as an unordered list also using an ngFor. The tab group works just fine, but the ul of links never displays.

All related posts that I could dig up were resolved by adding the BrowserAnimationsModule, but that is already imported into my project.

Here is the HTML:

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

This is the TS 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() {
    }

}

Answer 1

You're passing strings into your linkMenu[] . You need to pass in the arrays. You will also need to declare the linksMenu[] last (below linksA-D).

linkMenu = [
        {dispName: "Link Set A", varName: this.linksA},
        {dispName: "Link Set B", varName: this.linksB},
        {dispName: "Link Set C", varName: this.linksC},
        {dispName: "Link Set D", varName: this.linksD},
    ]

See working StackBlitz example of your code.

StackBlitz Demo