How to set the Angular material tab's mat-ink-bar to take the width of tab header text width

Question

I want the Angular material tab's mat-ink-bar to take the width of the tab header text's width. Currently, it is larger than the tab header text width.

The following image shows how it looks now.

The following image shows how I want it to be.

Could you help me how to make this happen?

Answer 1

I achieved this by removing min-width and padding on the .mat-tab-label class.. and adding margin as per my requirement to keep the labels apart. this worked as mat-ink-bar takes the width of mat-tab-label which was set min-width to 160px;

SCSS:

mat-tab-header {
border-bottom: none !important;
.mat-tab-label-container {
    margin-bottom: 12px;
    .mat-tab-labels {
    .mat-tab-label {
        padding: 0 0 !important;
        min-width: 10px;
        margin-left: 95px;
    }
    }
}
}

Answer 2

I have done it using after and before css pseudo classes, but for cutting a definite amount of the mat-ink-bar width. Please see the below SCSS code

  mat-ink-bar {           
                &:before,
                &:after {
                    content: "";
                    height: 2px;
                    width: 20px;
                    background-color: white;
                    position: absolute;
                    left: 0;
                }
                &:after {
                    left: initial;
                    right: 0;
                }
            }

Answer 3

Simply remove the background color of existing mat-link-bar (using background-color: transparent ) and create a new style using pseudo class.

     .mat-ink-bar {
        background-color: transparent;
        &::before {
          content: '';
          display: block;
          width: 90%;
          background-color: #47a1f6;
          height: 6px;
          border-bottom-right-radius: 70px;
          border-bottom-left-radius: 70px;
          left: 5%;
          position: relative;
        }
      }

Looks like this:

Answer 4

In later versions of Angular Material (currently 15) you now have the option to use the fitInkBarToContent attribute.

<mat-tab-group fitInkBarToContent>
  <mat-tab label="Tab">Content</mat-tab>
</mat-tab-group>

See the examples under https://material.angular.io/components/tabs/examples#tab-group-ink-bar