title: how to get active tab highlighted in mat-tab?
body: <p>I am using angular material for angular development.</p>
  <p><strong>HTML Component</strong></p>
  <pre><code>&lt;mat-tab-group headerPosition=&quot;above&quot; [selectedIndex]=&quot;1&quot;&gt;
      &lt;mat-tab label=&quot;Home&quot; routerLinkActive=&quot;active-link&quot;&gt; &lt;app-homer&gt;&lt;/app-home&gt;&lt;/mat-tab&gt;
      &lt;mat-tab label=&quot;Orders&quot; routerLinkActive=&quot;active-link&quot;&gt; &lt;app-order&gt;&lt;/app-order&gt; &lt;/mat-tab&gt;
      &lt;mat-tab label=&quot;Contact Us&quot; routerLinkActive=&quot;active-link&quot;&gt; &lt;app-contact&gt;&lt;/app-contact&gt; &lt;/mat-tab&gt;
      &lt;mat-tab label=&quot;Profile&quot; routerLinkActive=&quot;active-link&quot;&gt; &lt;app-profile&gt;&lt;/app-profile&gt;&lt;/mat-tab&gt;
    &lt;/mat-tab-group&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>.mat-tab-label{
      margin-top: 20px;
      border: 2px solid black; 
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      width: 10vw;
      height: 4vh !important;
      background-color: black;
      font-size: 12px;
      font-weight: bold;
      opacity: 1;
      color: yellow;
  }
  </code></pre>
  <p>I have customized default tab which comes in white color by giving specific color and border as shown in the css.
  When I load the page I am getting selected component but the tab is not active and looks like disabled. But If I click I can see the difference , the given highlighted color shows when I click it. Is there any way to make the tab look active on load.</p>
  <p>in mat-tab-link routerLinkActive=&quot;active-link&quot; was there but no such feature in mat-tab ?</p>
  <p>I decided to go with mat-tag-group and mat-tab because of the animated screen loading feature.</p>
  <p><a href="https://stackblitz.com/edit/angular-whmn9b?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">stackblitz link</a></p>