How to customize selected tab styles in Angular Tab

31 Aug 20263 minutes to read

Customize the appearance of the active Tab by combining a custom HTML header (passed to the text property) with a custom CSS class assigned via the cssClass property of the Tab.

Steps

  1. Pass an HTML string to items[i].header.text to include animation or custom markup in the header.
  2. Set cssClass on the Tab component to a custom class (e.g., "custom-tab").
  3. Override the active header styles using the custom class in your component or global CSS:
.custom-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    background: #1976d2;
    color: #fff;
}

The cssClass property is defined on the Tab component itself, not on Toolbar.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TabModule } from '@syncfusion/ej2-angular-navigations'




import { Component } from '@angular/core';

/**
 * Customize selected tab styles
 */

@Component({
imports: [
        FormsModule, TabModule
    ],


standalone: true,
    selector: 'app-container',
    template: `<ejs-tab id="element" [items]='items'></ejs-tab>`
})
export class AppComponent {
    public items: Object[] = [
        {
            header: { 'text': '<div id="template-wrap"><div class="e-image e-andrew"></div><div class="e-title fade-in">Andrew</div></div>' },
            content: 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of Dallas in 1981.He is fluent in French and Italian and reads German.He joined the company as a sales representative, was promoted to sales manager in January 1992 and to vice president of sales in March 1993.Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.'
        },
        {
            header: { 'text': '<div id="template-wrap"><div class="e-image e-margaret"></div><div class="e-title fade-in">Margaret</div></div>' },
            content: 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American Institute of Culinary Arts (1966).She was assigned to the London office temporarily from July through November 1992.'
        },
        {
            header: { 'text': '<div id="template-wrap"><div class="e-image e-janet"></div><div class="e-title fade-in">Janet</div></div>' },
            content: 'Janet has a BS degree in chemistry from Boston College (1984).She has also completed a certificate program in food retailing management.Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.'
        }
    ]
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also