Tabs

    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 tabs component places tabs at the top and allows scrolling when there are multiple tab items on the screen.

    Angular Tabs Example

    Usage

    First, we need to import the IgxTabsModule in the app.module.ts file.

    // app.module.ts
    
    ...
    import { IgxTabsModule } from 'igniteui-angular';
    
    @NgModule({
        ...
        imports: [..., IgxTabsModule],
        ...
    })
    export class AppModule {}
    

    We set the 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:

    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 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:

    @import '~igniteui-angular/lib/core/styles/themes/index';
    

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

    $dark-tabs: igx-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 igx-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 igx-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 igx-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: igx-palette(
      $primary: $black-color,
      $secondary: $yellow-color,
      $grays: #fff
    );
    

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

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

    API References

    Theming Dependencies

    Additional Resources

    Our community is active and always welcoming to new ideas.