title: How to change background color of specific angular material tabs?
body: <p>I have a component using mat tab from angular material 7.</p>
  
  <p>I want to change the background color of my tabs depending on a boolean value of my typescript variable.</p>
  
  <p>The problem is that I can only apply the CSS on all tabs with </p>
  
  <pre><code>.mat-tab-label {
    background-color: red;
  }
  </code></pre>
  
  <p>How to create a CSS class which I can apply on a specific tab.</p>
  
  <p>I have a standard component. I tried using  encapsulation: ViewEncapsulation.None but this only allowed me to change all tabs as mentioned above.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;mat-tab-group mat-align-tabs="center" dynamicHeight="true"&gt;
    &lt;mat-tab label="tab1"&gt;
      Hello
    &lt;/mat-tab&gt;
    &lt;mat-tab label="tab2"&gt;
      Hello2
    &lt;/mat-tab&gt;
  &lt;/mat-tab-group&gt;
  </code></pre>