Angular Material mat tab inside tab and main first tab name not change

Question

I used my project for Angular material taband i used mat tab inside tab , my issue is main tab first tab and sub tab 1st tab label name not change ,I used different label name but not changed. you can clearly understand it please look working stack blitz live code sample

<mat-tab label="Data sources "> 

Data sources lable name not showing

anyone know how to fix that issue

Thanks

stackblitz live code here

My code part

<div class="container " style="margin-top: 2.5rem;" >
  <!--Tab Section-->
  <div class="sg-tabs">
    <mat-tab-group [selectedIndex]="0">
      <mat-tab label="Data sources ">
        <table class="table">
          <thead>
          <tr>
            <th scope="col">
              <p class="sg-dt-table">Data name</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Status</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Description</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Users</p>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample</p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample created by </p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png" matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample dby </p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          </tbody>
        </table>







        <br>
        <div class="border-top"></div>
        <!-- -CNS Button-->

        <!--/End  - Button-->
        <div class="sg-section-two  " >
          <mat-tab-group  [selectedIndex]="0">
            <!--Creater with accelerator-->
            <mat-tab >
              <ng-template mat-tab-label>
                <img src="assets/sg-img/Spaceship Launch Pad.png">
                <span class="sg-mat-txt" matTooltip="Create with accelerator"
                      aria-label="">Create with <br> accelerator</span>
              </ng-template>

              <!--- Schema forum-->

            </mat-tab>
            <!--Creater with accelerator-->
            <mat-tab>
              <ng-template mat-tab-label>
                <img src="assets/sg-img/Spider.png">
                <span class="sg-mat-txt" matTooltip="Create schema with editor"
                      aria-label="">Create schema <br> with editor</span>
              </ng-template>


            </mat-tab>
            <mat-tab>
              <ng-template mat-tab-label>
                <img src="assets/sg-img/Guitar Amplifier.png">
                <span class="sg-mat-txt" matTooltip="Upload schema"
                      aria-label="">Upload<br>&nbsp;&nbsp;schema</span>
              </ng-template>


            </mat-tab>
            <mat-tab>
              <ng-template mat-tab-label>
                <img src="assets/sg-img/Binder.png">
                <span class="sg-mat-txt" matTooltip="Connect to enterprise databasee"
                      aria-label="">Connect to enterprise  <br> database </span>
              </ng-template>

            </mat-tab>
          </mat-tab-group>
        </div>




      </mat-tab>
      <mat-tab label="My projects ">
        <table class="table">
          <thead>
          <tr>
            <th scope="col">
              <p class="sg-dt-table">Data source name</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Status</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Description</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Users</p>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample_schema_1</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample database created by by deafult</p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample_schema_1</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample database created by  by deafult</p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample_schema_1</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample database created by  by deafult</p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          </tbody>
        </table>
      </mat-tab>
      <mat-tab label="Connected apps ">
        <table class="table">
          <thead>
          <tr>
            <th scope="col">
              <p class="sg-dt-table">Data source name</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Status</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Description</p>
            </th>
            <th scope="col">
              <p class="sg-dt-table">Users</p>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample_schema_1</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample database created by  by deafult</p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample_schema_1</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample database created </p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          <tr>
            <td>
              <p class="sg-dt-tabledetails">sample_schema_1</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">active</p>
            </td>
            <td>
              <p class="sg-dt-tabledetails">Sample </p>
            </td>
            <td><span class="sg-users">
                                    <img src="assets/sg-img/sg-user-sm.png">
                                    <img src="assets/sg-img/Group.png"  matTooltip="Add new user"
                                         aria-label="Button that displays a tooltip when focused or hovered over">
                                    </span>
            </td>
          </tr>
          </tbody>
        </table>
      </mat-tab>


    </mat-tab-group>
  </div>
  <!--/End -CNS Tab Section-->

</div>

Answer 1

For first tab also use ng-template

like this,

<mat-tab>
  <ng-template mat-tab-label>
    <span class="sg-mat-txt" matTooltip="Data sources" aria-label="">Data sources</span>
  </ng-template>
</mat-tab>

Here's updated Stackblitz

Answer 2

<mat-tab>
  <ng-template mat-tab-label>
    Data Sources
  </ng-template>
  <table> </table>
</mat-tab>

Use ng-template for data source ie the first tab.

updated Stackblitz