Angular Tabs Component Overview

Ignite UI for Angular Tabs is a full-featured user interface component that has the primary purpose to organize and group related content in a single tabbed view, thus saving space and making content more comprehensible. It packs different features like animations, templating, customization options, and others.

Tabs in Angular are extremely useful when you’re building a web page with plenty of content that must be fitted into categories and displayed in a concise and space-efficient way.

The igx-tabs component in Ignite UI for Angular is used to organize or switch between similar data sets. It functions as a wrapper for igx-tab-item which respectively represent the container for the data and the tab header. The Angular Tabs Component places tabs at the top and allows scrolling when there are multiple tab items on the screen.

Angular Tabs Example

This is a basic example of Angular Nested Tabs where we have one tab within another where only one view can be seen at the time. Using nested tabs in Angular, we can display information in a better, structured way.

Getting Started with Ignite UI for Angular Tabs

To get started with the Ignite UI for Angular Tabs component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

ng add igniteui-angular

For a complete introduction to the Ignite UI for Angular, read the getting started topic.

The next step is to import the IgxTabsModule in your app.module.ts file.

// app.module.ts

...
import { IgxTabsModule } from 'igniteui-angular';
// import { IgxTabsModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxTabsModule],
    ...
})
export class AppModule {}

Alternatively, as of 16.0.0 you can import the IgxTabsComponent as a standalone dependency, or use the IGX_TABS_DIRECTIVES token to import the component and all of its supporting components and directives.

// home.component.ts

import { IGX_TABS_DIRECTIVES } from 'igniteui-angular';
// import { IGX_TABS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-tabs>
      <igx-tab-item>
        <igx-tab-header>
          <span igxTabHeaderLabel>Tab 1</span>
        </igx-tab-header>
        <igx-tab-content>
          This is Tab 1 content.
        </igx-tab-content>
      </igx-tab-item>
      <igx-tab-item>
        <igx-tab-header>
          <span igxTabHeaderLabel>Tab 2</span>
        </igx-tab-header>
        <igx-tab-content>
          This is Tab 2 content.
        </igx-tab-content>
      </igx-tab-item>
    </igx-tabs>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_TABS_DIRECTIVES]
    /* or imports: [IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabHeaderLabelDirective] */
})
export class HomeComponent {}

Now that you have the Ignite UI for Angular Tabs module or directives imported, you can start using the igx-tabs component.

Using the Angular Tabs

We set the Angular Tabs header by providing content to igx-tab-header. To set the tab's name we simply add a span with igxTabHeaderLabel directive. Any content that will appear as a tab item's content should be added between igx-tab-content tags.

<igx-tabs>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 1</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 1 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 2</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 2 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 3</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 3 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 4</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 4 content.
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
      <span igxTabHeaderLabel>Tab 5</span>
    </igx-tab-header>
    <igx-tab-content>
      This is Tab 5 content.
    </igx-tab-content>
  </igx-tab-item>
</igx-tabs>

If the sample is configured properly, the final result should look like that:

Angular Tabs Alignment

IgxTabs tabAlignment input property controls how tabs are positioned and arranged. It accepts four different values - start, center, end and justify.

• Start (default): the width of the tab header depends on the content (label, icon, both) and all tabs have equal padding. First tab is aligned to the tabs container left side.
• Center: the width of the tab header depends on the content and occupies the tabs container center. If the space is not enough to fit all items, scroll buttons are displayed.
• End: the width of the tab header depends on the content and all tabs have equal padding. Last tab is aligned to the tabs container right side.
• Justify: all tab headers are equal in width and fully fit the tabs container. If the space is not enough to fit all items, scroll buttons are displayed.

Sample below demostrates how tabs get aligned when switching between tabAlignment property values.

Customizing Angular Tabs

Let's modify the tabs and make them more appealing by including icons using the igxTabHeaderIcon directive. The igx-tabs component is compatible with the Material Design Icons so it will be very easy to adopt them in your application.

Note

If you haven't used the igx-icon in your application so far, please make sure to import the IgxIconModule in the app.module.ts before proceeding.

First, add the Material Icons in your 'styles.scss' file in the main application folder. Next, add igx-icon with igxTabHeaderIcon directive set, as a child of igx-tab-header.

// styles.scss

...
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
...

<igx-tabs>
  <igx-tab-item>
    <igx-tab-header>
        <igx-icon igxTabHeaderIcon>library_music</igx-icon>
        <span igxTabHeaderLabel>Albums</span>
    </igx-tab-header>
    <igx-tab-content>
        Albums
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
        <igx-icon igxTabHeaderIcon>favorite</igx-icon>
        <span igxTabHeaderLabel>Favorite</span>
    </igx-tab-header>
    <igx-tab-content>
        Favorite
    </igx-tab-content>
  </igx-tab-item>
  <igx-tab-item>
    <igx-tab-header>
        <igx-icon igxTabHeaderIcon>info</igx-icon>
        <span igxTabHeaderLabel>Details</span>
    </igx-tab-header>
    <igx-tab-content>
        Details
    </igx-tab-content>
  </igx-tab-item>
</igx-tabs>

If the sample is configured properly, the tabs should look like the following example:

If setting the labels and icons is not enough, you can also provide your own custom content directly between igx-tab-header tags.

<igx-tabs>
  <igx-tab-item>
    <igx-tab-header>
      <!-- your custom tab content goes here -->
      <div>
        <img src="https://static.infragistics.com/marketing/Website/products/ignite-ui-landing/ignite-ui-logo.svg"
             width="80px" height="40px">
      </div>
    </igx-tab-header>
    <igx-tab-content>
      <h1>IgniteUI Rocks!</h1>
    </igx-tab-content>
  </igx-tab-item>
</igx-tabs>

You can also add you own custom tab header's prefix and suffix simply by using igxPrefix and igxSuffix directives. The sample below demonstrates how to add a tab with custom header content and prefix/suffix.

Integration With Router Outlet Container

Although the igx-tabs component is meant to be used as a list of tabs with content specified for each tab item, there might be cases in which you need to define tab items where the content is separate from the tab content.

When defining tab items you have the ability to apply directives to them. For example, you may use this functionality to achieve navigation between views using the Angular Router. The following example will demonstrate how to configure the igx-tabs component to switch between three components in a single router-outlet.

To start we need a component to hold our igx-tabs component and three view components with some content for demonstration purposes. For simplicity, the view components have very short templates.

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

@Component({
    selector: 'app-tabs-routing',
    styleUrls: ['tabs-routing.component.scss'],
    templateUrl: 'tabs-routing.component.html'
})
export class TabsRoutingComponent { }

@Component({
    template: '<p>Tab 1 Content</p>'
})
export class TabsRoutingView1Component { }

@Component({
    template: '<p>Tab 2 Content</p>'
})
export class TabsRoutingView2Component { }

@Component({
    template: '<p>Tab 3 Content</p>'
})
export class TabsRoutingView3Component { }

Next, we create the appropriate navigation mappings in the app-routing.module.ts file:

import { RouterModule, Routes } from '@angular/router';

import {
    TabsRoutingComponent,
    TabsRoutingView1Component,
    TabsRoutingView2Component,
    TabsRoutingView3Component
} from './tabs-routing.component';

...

const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: '/tabs-routing'
    },
    {
        path: 'tabs-routing',
        component: TabsRoutingComponent,
        children: [
            { path: 'view1', component: TabsRoutingView1Component },
            { path: 'view2', component: TabsRoutingView2Component },
            { path: 'view3', component: TabsRoutingView3Component },
        ]
    }
];

@NgModule({
    exports: [RouterModule],
    imports: [RouterModule.forRoot(appRoutes)]
})
export class AppRoutingModule { }

Now that we have all navigation routes set up, we need to declare the igx-tabs component and configure it for routing. Make sure to add a router-outlet for rendering the view components.

<!-- tabs-routing.component.html -->

<igx-tabs #tabs1>
  <igx-tab-item
      routerLinkActive
      #rla1="routerLinkActive"
      [selected]="rla1.isActive"
  >
      <igx-tab-header routerLink="view1">
          <span igxTabHeaderLabel>Tab 1</span>
      </igx-tab-header>
  </igx-tab-item>
  <igx-tab-item
      routerLinkActive
      #rla2="routerLinkActive"
      [selected]="rla2.isActive"
  >
      <igx-tab-header routerLink="view2">
          <span igxTabHeaderLabel>Tab 2</span>
      </igx-tab-header>
  </igx-tab-item>
  <igx-tab-item
      routerLinkActive
      #rla3="routerLinkActive"
      [selected]="rla3.isActive"
  >
      <igx-tab-header routerLink="view3">
          <span igxTabHeaderLabel>Tab 3</span>
      </igx-tab-header>
  </igx-tab-item>
</igx-tabs>

<router-outlet></router-outlet>

The above code creates an igx-tabs component with three tab items. Each tab item's header has the RouterLink directive applied, which is used to specify the routing link used for the navigation. If any of the links becomes active, the corresponding tab item will have its selected property set because of the binding to the RouterLinkActive directive's isActive property. This way the selected tab item will always be synchronized with the current url path.

Note

Please note that the routerLink directive is set to the igx-tab-header, not directly to the igx-tab-item.

Styles

To get started with styling the tabs, we need to import the theming module, where all the theme functions and component mixins live:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Following the simplest approach, we create a new theme that extends the tabs-theme and accepts various properties that allow us to style the tab groups.

$dark-tabs: tabs-theme(
    $item-text-color: #F4D45C,
    $item-background: #292826,
    $item-hover-background: #F4D45C,
    $item-hover-color: #292826,
    $item-active-color: #F4D45C,
    $item-active-icon-color: #F4D45C,
    $indicator-color: #F4D45C,
    $tab-ripple-color: #F4D45C
);

If we take a look at the tabs-theme, we will notice that there are even more properties available to us in order to style our tabs.

Note

In order to style any component used as part of a tab content, additional themes should be created specific to the respective component.

The last step is to include the component theme in our application.

@include css-vars($dark-tabs);

If you are targeting browsers that don't support CSS variables, like IE 11, you can use the theme component mixin to overwrite its default theme:

:host {
  ::ng-deep {
    @include tabs($dark-tabs);
  }
}

Palettes & Colors

Instead of hardcoding the color values, like we just did, we can achieve greater flexibility in terms of colors by using the igx-palette and igx-color functions.

igx-palette generates a color palette based on the primary and secondary colors that are passed:

$yellow-color: #F4D45C;
$black-color: #292826;

$dark-palette: palette(
  $primary: $black-color,
  $secondary: $yellow-color,
  $grays: #fff
);

We can easily retrieve any color from the palette using igx-color.

$dark-tabs: tabs-theme(
    $palette: $dark-palette,
    $item-text-color: color($dark-palette, "secondary", 400),
    $item-background: color($dark-palette, "primary", 400),
    $item-hover-background: color($dark-palette, "secondary", 400),
    $item-hover-color: color($dark-palette, "primary", 400),
    $item-active-color: color($dark-palette, "secondary", 400),
    $item-active-icon-color: color($dark-palette, "secondary", 400),
    $indicator-color: color($dark-palette, "secondary", 400),
    $tab-ripple-color: color($dark-palette, "secondary", 400)
);

API References

• IgxIconComponent
• IgxNavbarComponent
• IgxTabsComponent
• IgxTabsComponent Styles
• IgxTabItemComponent
• IgxTabHeaderComponent
• IgxTabContentComponent

Theming Dependencies

• IgxIcon Theme
• IgxRipple Theme
• IgxButton Theme

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for Angular Forums
• Ignite UI for Angular GitHub