Is it possible to indicate which mat-tab has been clicked? Especially when the mat-tabs are being generated dynamically

Question

Is it possible to indicate which mat-tab has been clicked? Especially when the mat-tabs are being generated dynamically

In my UI, I have a dynamic display of mat-tabs that change in number and data based on values from the backend. These tabs are generated dynamically, and when one is clicked, an ID is passed to a function for processing. I want to be able to identify the specific mat-tab that has been clicked and keep it highlighted until the user navigates to another page.

I attempted to use

mat-tab:active{background-color: #333}

, but it did not work as expected.

    <mat-tab-group [selectedIndex]="Index" (selectedTabChange)="tabChanged($event)" style="width:100%" #Tabgroup>
          <div *ngFor="let item of items; let last = last;" class="button">
            <mat-tab>
              <ng-template mat-tab-label>
                <span class="XYZ" id="item.Id"
                  (click)="setmodule(item.Id)">{{item.Name}}</span>
              </ng-template>
            </mat-tab>
          </div>
    </mat-tab-group>

No error messages were displayed, but the desired outcome was not achieved.

html css angular angular-material angular6

Answer 1

Answer №1

To ensure proper functionality, it is important to store the clicked tab ID in a variable and then utilize ngClass in this manner:

<mat-tab-group [selectedIndex]="Index" (selectedTabChange)="tabChanged($event)" style="width:100%" #Tabgroup>
      <div *ngFor="let item of items; let last = last;" class="button">
        <mat-tab [ngClass]="{'tab-selected': selectedTabId==item.id}">
          <ng-template mat-tab-label>
            <span class="XYZ" id="item.Id"
              (click)="setmodule(item.Id)">{{item.Name}}</span>
          </ng-template>
        </mat-tab>
      </div>
</mat-tab-group>

When defining your styles, remember to include the following:

.tab-selected
{
  background-color: #333;
  // Additional styles can be added here
}

Answer 2

To ensure proper functionality, it is important to store the clicked tab ID in a variable and then utilize ngClass in this manner:

<mat-tab-group [selectedIndex]="Index" (selectedTabChange)="tabChanged($event)" style="width:100%" #Tabgroup>
      <div *ngFor="let item of items; let last = last;" class="button">
        <mat-tab [ngClass]="{'tab-selected': selectedTabId==item.id}">
          <ng-template mat-tab-label>
            <span class="XYZ" id="item.Id"
              (click)="setmodule(item.Id)">{{item.Name}}</span>
          </ng-template>
        </mat-tab>
      </div>
</mat-tab-group>

When defining your styles, remember to include the following:

.tab-selected
{
  background-color: #333;
  // Additional styles can be added here
}

Answer 3

Answer №2

To change the background color of an active tab, you can target the "mat-tab-label-active" class. This class is automatically applied when a tab is active.

You can modify this class using ng-deep as shown below:

::ng-deep .mat-tab-label-active {
  background-color: #333;
}

If you have multiple components with mat-tabs and want to style them individually, you can assign a class to your mat-tab-group element like so:

<mat-tab-group class="menu-tab" [(selectedIndex)]="selectedTabIndex">
  <div *ngFor="let item of menuList">
  <mat-tab>
    <ng-template mat-tab-label>
      <a class="side-nav-link">{{ item.value}}</a>
    </ng-template>
  </mat-tab>
</div>
</mat-tab-group>

To style the active tab within the specific tab group, use the following CSS:

.menu-tab ::ng-deep .mat-tab-label-active {
  background-color: #333;
}

Answer 4

To change the background color of an active tab, you can target the "mat-tab-label-active" class. This class is automatically applied when a tab is active.

You can modify this class using ng-deep as shown below:

::ng-deep .mat-tab-label-active {
  background-color: #333;
}

If you have multiple components with mat-tabs and want to style them individually, you can assign a class to your mat-tab-group element like so:

<mat-tab-group class="menu-tab" [(selectedIndex)]="selectedTabIndex">
  <div *ngFor="let item of menuList">
  <mat-tab>
    <ng-template mat-tab-label>
      <a class="side-nav-link">{{ item.value}}</a>
    </ng-template>
  </mat-tab>
</div>
</mat-tab-group>

To style the active tab within the specific tab group, use the following CSS:

.menu-tab ::ng-deep .mat-tab-label-active {
  background-color: #333;
}

Is it possible to indicate which mat-tab has been clicked? Especially when the mat-tabs are being generated dynamically

Answer №1

Answer №2

Similar questions

Steps for connecting to a property in another component

Sorry, but sessionStorage is not functioning correctly

The grayscale effect is not functioning on the default web browser of an Android device

What is the best way to add an Angular directive to ever-changing HTML content?

Access the RxJS subscription data once and save it for later reuse

Dynamic visual content (map)

How can CSS be effectively handled across master pages, content pages, and user controls?

Having trouble retrieving information from combineLatest in Angular?

Filtering data on objects in Angular can be achieved by utilizing the built-in

Obtain an array containing only one property value from an array of objects

Resolving issues with JavaScript caused by Polymer updates

the process of extracting data from a request body in Angular 2

Centering an item using Bootstrap

Issue encountered during Angular unit test execution

Designing table rows to resemble full-width cards

Using Ionic 4 and Angular 7 to make straightforward remote HTTP requests with Cross-Origin Resource

Select the <Tr> element effortlessly with a single click

The argument labeled as 'shop' does not fit the criteria for the parameter 'items' or 'cart'

Decoding JavaScript elements embedded in an HTML website

Eliminate extraneous space with the clearfix:after pseudo-element