How to add an link in the same line as that of mat-tab-group

Question

In an angular template file we have 2 tabs summary & preview, I have to add a link to that in the same line horizontally which is not part of the mat-tab-group, i.e. it is not a mat-tab.By wrapping the mat-tab-group with a div and placing the link in another div I can make them horizontally aligned but it opens up lot of empty space beneath which spoils the look.Should I make 'Preview' and 'View Survey Dashboard' part of the same label inside the 2nd tab with some empty space in-between - but in that case if you click preview or view dashboard it will have the same effect i.e. to preview section of the page, whereas I want to be transported to the dashboard.

It should look like this:

Edit:1 Code snippet:

<mat-tab-group animationDuration="0ms" dynamicHeight="true" 
                (selectedTabChange)="tabClick($event)" id="Survey-lib-webapp">
    <mat-tab label="Summary">
    ...
    </mat-tab>
    <mat-tab label="Preview">
    ...
    </mat-tab>
  </mat-tab-group>

Unless you're using angularjs, I'm not sure I'd be able to help (moved to React). But it will probably better to post also your code, or, even better, include also a codesandbox so people could play with your demo and find the answer. I believe it will increase the chance to get an answer.. — Mosh Feu
Something like that maybe? stackoverflow.com/q/47247816/863110 — Mosh Feu
@Mosh Feu, the solution in the link provided works only partially.Now "View Dashboard" shows at intended place. But as you scroll, it also scrolls.I have wrapped it in a div & used position:absolute. — Subhendu Mahanta

Subhendu Mahanta Subhendu Mahanta · Accepted Answer · 2020-07-02T07:59:43

I solved the problem the following way - outmost div with relative position & the View Dashboard div with absolute position.One problem was the View Dashboard link became non clickable, pointer-events: auto came to the rescue.

<div style="position: relative;">
<div>
  <mat-tab-group animationDuration="0ms" dynamicHeight="true"  
  (selectedTabChange)="tabClick($event)" id="Survey-lib-webapp">

    <mat-tab label="Summary">
    ...
    </mat-tab>
    <mat-tab label="Preview">
    ...
    </mat-tab>
     </mat-tab-group>
</div>
<div style="position: absolute; top: 2vh; left: 75vw; z-index: 5;">
  <a style="font-size:1.285rem; font-weight:400;pointer-events: auto" href="#" (click)="onNavigateViewDashboard(dialogData)">View Dashboard</a>
</div>
</div>

I want to thank @Mosh Feu for sharing the link which got me started.

How to add an link in the same line as that of mat-tab-group

1 Answers