CODEWITHSUNDEEP
angulartypescriptangular-material
kaiilim
kaiilim

Reputation: 606

Angular Material Tabs how to customize tab row and add text or dropdown list?

I am currently using angular material tabs and I wish to add text before the tabs and also add a drop down list at the end of the row after the tabs. Ideally it should looks something like the following picture:

sample

I tried putting a label or creating a div beside the tabs, however those are not showing. In the end, I created another tab and set it to disabled but I think this is not ideal and I couldn't change the disabled text colour. As for the drop down list I have no clue how to go about it.

I have a demo on stackblitz HERE

How do I customize the tab row and add text or dropdown list in it?

Upvotes: 0

Views: 1870

Answers (2)

Rajesh Kumar
Rajesh Kumar

Reputation: 79

Absolute positioning always break when the page has responsive design.

you can do the following

  <mat-tab labelClass="custom-tab" disabled="true">
    <ng-template mat-tab-label >
<div>
  <label>anything you want to add</label>
</div>
    </ng-template>
   
  </mat-tab>


div.custom-tab {
  display: flex;
  flex-grow: 1;
  justify-content: end;
}

And in case the styles are not getting applied, you can use the below property for component decorator

 encapsulation: ViewEncapsulation.None

Upvotes: 0

Tonio
Tonio

Reputation: 5004

You could use absolute position to achieve what you want. You won't be able to do better than this because the component you are using mat-tab-group does not have the option to pass a component in input to display where you want.

So if you want to show something inside mat-tab-group that is not part of mat-tab-group, you have to use absolute position.

I updated your stackblitz here

Note: your disabled Tab trick is very good also, it's a trick but sometimes you have to do some tricks

Upvotes: 0

Related Questions