Dynamically set the background color of mat-tab

Question

I want to be able to set the color of the tab according to a condition like i'm doing on the div in the provided stackblitz project with the content class. If the selectedMarketStatus === marketStatus.Open statement is true i want both the content div and the tab to be green. Is this possible? If so how do i do it?

Edit: updated the blitz which kind of does what i wanted, the scss style on the &-closed does not work on stackblitz but it works in my project.

Stackblitz

export class TabGroupThemeExample {
  public marketStatus = MarketPurchaseStatus;
  public selectedMarketStatus = this.marketStatus.Open;
  constructor() {}
}

export enum MarketPurchaseStatus {
  BeforeOpen = 0,
    Open = 1,
    AfterClose = 2
}

.content {
  background-color: gray;
}

.open {
  background-color: green;
}

<mat-tab-group class="subscription-market-tabs" [animationDuration]="0" [disableRipple]="true">
  <mat-tab>
    <ng-template mat-tab-label>aaaa</ng-template>
  </mat-tab>
  <mat-tab [disabled]="selectedMarketStatus === marketStatus.AfterClosed">
    <ng-template mat-tab-label>bbbb</ng-template>
  </mat-tab>
</mat-tab-group>
<div class="content" [class.open]="selectedMarketStatus === marketStatus.Open">aaaaaa</div>

Zonaib · Answer 1 · 2019-10-15T09:20:54.583

0

Use conditional Styling to achieve this. i believe this link will help you.

If you add style:

<some-element [ngStyle]="{'backgroundColor':  (selectedMarketStatus === marketStatus.Open) ? 'green' : ''}">element</some-element>

If you have a class like above use the below code:

<some-element [ngClass]="{'green': selectedMarketStatus === marketStatus.Open }">...</some-element>

Please look at angular documentation for ngStyle and ngClass

Please look at this updated version of your code

edited Oct 15 '19 at 09:20

answered Oct 15 '19 at 08:54

Zonaib

321
5
9

Thanks for the answer but this does not seem to work on the Mat-tab element? Nothing is happening. – Johannes Kraft Oct 15 '19 at 09:05
I can't see any changes on the link you sent? – Johannes Kraft Oct 15 '19 at 09:17
I can use this on other elements as usual but my problem is that i cant get it done on the mat-tab element. – Johannes Kraft Oct 15 '19 at 09:19
Please look at this [link](https://stackblitz.com/edit/angular-5jtkr3-abyl6r) – Zonaib Oct 15 '19 at 09:21
Nice, well i got that to work as well but then only the text in the tab gets a new background color, I need the full tab to change color. – Johannes Kraft Oct 15 '19 at 09:25
That's more to do with how you write css, or the width/height of the tab. But the code would remain same as above. – Zonaib Oct 15 '19 at 09:26
I can select the tab but i don't know hos to dynamically change it. Check out the new css file. [Link](https://stackblitz.com/edit/angular-5jtkr3-abyl6r) – Johannes Kraft Oct 15 '19 at 09:27
Could you explain, what do you mean, when you say dynamically change it? do you want to listen to a tab change event? Or do you want to change the color of your tab? – Zonaib Oct 15 '19 at 09:29
Well the dynamic thing is not that important right now, the thing is that it does not seem to be possible to change the Mat-tab element with a condition, just the text in the ng-template – Johannes Kraft Oct 15 '19 at 09:36
I think what you are looking for is a way to add multiple tabs, with dynamic content. Have you looked at [tabs documentation](https://material.angular.io/components/tabs/examples) they also have stackblitz links. – Zonaib Oct 15 '19 at 09:43
No just to change the background color of the tab. – Johannes Kraft Oct 15 '19 at 09:47
I have added some further content in the tab to show the tab takes the height of its content, or you can specify the minimum height of the tab, does that help with your problem? – Zonaib Oct 15 '19 at 09:53
Hehe thats relay nice :D but i need the green of the tab to take up the full tab – Johannes Kraft Oct 15 '19 at 09:54
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/200891/discussion-between-zonaib-and-johannes-kraft). – Zonaib Oct 15 '19 at 09:57

Johannes Kraft · Answer 2 · 2019-10-16T08:09:40.853

I ended up creating a global style for the tabs and used parent selectors to create one style that was "Open" and one that was "Closed" then i could conditionally switch between the two in the component.

Also updated the blitz in my original post.

tab-styles.scss:

.subscription-market-tabs {
  &-open {
    /* Removes the bottom border below the tabs */
    .mat-tab-header {
      border-bottom: none;
      /** Hack to hide the border between .mat-tab-body-wrapper and the active tab */
      transform: translateY(1px);
      z-index: 1000;
    }
    // Styling of tabs in the top banner (on the right side) of a coordinet-component
    .mat-tab-list {
      // Remove underline
      mat-ink-bar.mat-ink-bar {
        display: none;
      }
      // Tabs with rounded corners.
      .mat-tab-labels {
        color: black; // TODO: theme color
        .mat-tab-label {
          height: 72px;
          padding: 0 48px;
          border-radius: 10px 10px 0px 0px;
          background-color: #F2F8FF;
          color: black;
          border: 1px solid #D0DCEA;
          font-weight: 600;
          &.mat-tab-label-active {
            border-bottom: none;
            min-width: 160px !important;
            background-color: #D6ECEC; // TODO: theme color
            color: black; // TODO: theme color
            opacity: 1;
            font-weight: 700;
          }
        }
      }
    }
  }
  &-closed {
    /* Removes the bottom border below the tabs */
    .mat-tab-header {
      border-bottom: none;
      /** Hack to hide the border between .mat-tab-body-wrapper and the active tab */
      transform: translateY(1px);
      z-index: 1000;
    }
    // Styling of tabs in the top banner (on the right side) of a coordinet-component
    .mat-tab-list {
      // Remove underline
      mat-ink-bar.mat-ink-bar {
        display: none;
      }
      // Tabs with rounded corners.
      .mat-tab-labels {
        color: black; // TODO: theme color
        .mat-tab-label {
          height: 72px;
          padding: 0 48px;
          border-radius: 10px 10px 0px 0px;
          background-color: #F2F8FF;
          color: black;
          border: 1px solid #D0DCEA;
          font-weight: 600;
          &.mat-tab-label-active {
            border-bottom: none;
            min-width: 160px !important;
            background-color: #E7F0FA; // TODO: theme color
            color: black; // TODO: theme color
            opacity: 1;
            font-weight: 700;
          }
        }
      }
    }
  }
}

<mat-tab-group [class.subscription-market-tabs-closed]="model.selectedMarketStatus === marketStatus.AfterClose || marketStatus.BeforeOpen" 
                [class.subscription-market-tabs-open]="model.selectedMarketStatus === marketStatus.Open"
                [animationDuration]="0">
  <mat-tab [label]="'forecast-and-subscriptions-tab'|translate">
  </mat-tab>
  <mat-tab [label]="'market-and-bid-list-tab'|translate">
  </mat-tab>
</mat-tab-group>

Dynamically set the background color of mat-tab

2 Answers2