Angular 6 : display drop down besides mat-tab

Question

I am trying to display the drop down besides one of tab, and user should be able to click on the options of drop down. Can anyone please help and give idea, how should I achieve this.I tried to upload stackBlitz, somehow could not able to do so. I will provide any information whatever is required. Thanks !!

<mat-tab-group>
<mat-tab
    label="PROFILE">
    <mat-select placeholder="PROFILE">
        <mat-option>address</mat-option>

    </mat-select>

    <mat-tab-body>
        <p> Name : ABC</p>
        <p>Age: 123</p>
    </mat-tab-body>
</mat-tab>

<mat-tab
    label="Dashboard">
    <mat-select placeholder="DB">
        <mat-option>1</mat-option>

    </mat-select>

    <mat-tab-body>
        <p> Name : Test</p>
        <p>Age: 123</p>
    </mat-tab-body>
</mat-tab>

Answer 1

You can use <nav mat-tab-nav-bar> to achieve this. See: Angular Tabs and Navigation

nav mat-tab-nav-bar is similar to mat-tab the only difference is, you can place custom html in tab headers, define event on the tab clicks and based on those events and your logic, you can generate the body of tabs either through a router outlet, or showing and hiding components below your nav mat-tab-nav-bar.

I have created a Stackblitz for you. Tabs With Select Hope it helps.