Tabs

The igxTabs 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 and igx-tabs-group, as these 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.

Tabs Demo

Note

To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the installation topic.

Usage

To get started with the Ignite UI for Angular Tabs component, let's first import the IgxTabsModule in the app.module.ts file.

// app.module.ts

...
import { IgxTabsModule } from 'igniteui-angular';

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

Then, specify several tabs groups with label and content.

<igx-tabs>
  <igx-tabs-group label="Tab 1">This is Tab 1 content.</igx-tabs-group>
  <igx-tabs-group label="Tab 2">This is Tab 2 content.</igx-tabs-group>
  <igx-tabs-group label="Tab 3">This is Tab 3 content.</igx-tabs-group>
  <igx-tabs-group label="Tab 4">This is Tab 4 content.</igx-tabs-group>
  <igx-tabs-group label="Tab 5">This is Tab 5 content.</igx-tabs-group>
</igx-tabs>

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

Tabs Types

There are two types of tabs. Set the tabsType input to choose between fixed and content-fit tabs.

  • Content-fit tabs (default): the width of the tab header depends on the content (label, icon, both) and all tabs have equal padding. Nevertheless what type of tabs you have chosen, the tab header width is limited by the specified min and max width.
  • Fixed tabs: all tab headers are with equal width and fit in the tabs container. If the provided space is not enough for all items, scroll buttons are displayed.
<div class="items-wrapper__item items-wrapper__item-small items-wrapper__item--blue">
  <h4 class="sample-title">CONTENT-FIT TABS</h4>
  <igx-navbar title="Contacts" actionButtonIcon="menu">
    <igx-icon name="search"></igx-icon>
    <igx-icon name="more_vert"></igx-icon>
  </igx-navbar>
  <igx-tabs>
    <igx-tabs-group label="HOME">Home content.</igx-tabs-group>
    <igx-tabs-group label="RECENT CONTACTS">Recent contacts list.</igx-tabs-group>
    <igx-tabs-group label="MORE INFORMATION ABOUT SELECTED CONTACT">More detailed contact information.</igx-tabs-group>
  </igx-tabs>
</div>

<div class="items-wrapper__item items-wrapper__item-small items-wrapper__item--blue">
  <h4 class="sample-title">FIXED TABS</h4>
  <igx-navbar title="Contacts" actionButtonIcon="menu">
    <igx-icon name="search"></igx-icon>
    <igx-icon name="more_vert"></igx-icon>
  </igx-navbar>
  <igx-tabs tabsType="fixed">
    <igx-tabs-group label="HOME">Home content.</igx-tabs-group>
    <igx-tabs-group label="RECENT CONTACTS">Recent contacts list.</igx-tabs-group>
    <igx-tabs-group label="MORE INFORMATION ABOUT SELECTED CONTACT">More detailed contact information.</igx-tabs-group>
  </igx-tabs>
</div>

Customizing Tabs

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

First add the Material+Icons import in your 'styles.css' file in the main application folder.

// styles.css

...
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
...
<igx-tabs>
  <igx-tabs-group label="MY ALBUMS" icon="library_music">
    <div style="margin: 15px">
      <igx-card>
        <igx-card-header class="compact">
          <igx-avatar src="assets/images/card/avatars/alicia_keys.jpg" roundShape="true"></igx-avatar>
          <div class="igx-card-header__tgroup">
            <h3 class="igx-card-header__title--small">HERE</h3>
            <h5 class="igx-card-header__subtitle">by Alicia Keys</h5>
          </div>
        </igx-card-header>
        <igx-card-actions>
          <div class="igx-card-actions__bgroup">
            <button igxButton igxRipple>PLAY</button>
          </div>
        </igx-card-actions>
      </igx-card>
    </div>
  </igx-tabs-group>
  <igx-tabs-group label="FAVOURITES" icon="favorite">
    <div style="margin: 15px">
      <h5 class="igx-card-header__subtitle">Add your favourite songs here.</h5>
    </div>
  </igx-tabs-group>
  <igx-tabs-group label="INFO" icon="info">
    <div style="margin: 15px">
      <h5 class="igx-card-header__subtitle">"Here" is the sixth studio album by American singer and songwriter Alicia Keys.</h5>
    </div>
  </igx-tabs-group>
</igx-tabs>

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

If changing the tabs' labels and icons is not enough, you can also create your own template for each tab header.

<igx-tabs>
    <igx-tabs-group>
        <ng-template igxTab>
            <div>
                <!-- your custom tab content goes here -->
            </div>
        </ng-template>
        <h1>Tab content</h1>
    </igx-tabs-group>
</igx-tabs>

API Summary

The following tables summarize some of the useful Tabs component inputs and outputs.

Inputs

The following input is available in the igx-tabs component:

Name Type Description
tabsType TabsType Defines the tab header sizing mode - contentfit (default) or fixed.
selectedIndex number Gets/sets the index of selected tab item.

The following inputs are available in the igx-tabs-group component:

Name Type Description
label String Defines the label of the associated tab header.
icon String Defines the icon of the associated tab header.

Outputs

The following outputs are available on the igx-tabs component:

Name Type Description
onTabItemSelected EventEmitter Emits an event when a tab item is selected. Returns the selected IgxTabItemComponent and IgxTabsGroupComponent.
onTabItemDeselected EventEmitter Emits an event when a tab item is deselected. Returns the deselected IgxTabItemComponent and IgxTabsGroupComponent.

Getters

The following getters are available in the igx-tabs component:

Name Type Description
tabs QueryList Provides an observable collection of all IgxTabItemComponent-s.
groups QueryList Provides an observable collection of all IgxTabsGroupComponent-s.
selectedTabItem IgxTabItemComponent Gets the selected IgxTabItemComponent based on selectedIndex.

The following getters are available on the igx-tabs-group component:

Name Type Description
disabled boolean Gets whether the group is disabled.
index number Gets the group index in the groups collection.
relatedTab IgxTabItemComponent Gets the tab associated with the group.

The following getters are available on the igx-tab-item component:

Name Type Description
disabled boolean Gets whether the tab is disabled.
isSelected boolean Gets whether the tab is selected.
index number Gets the index of the tab in the tab collection.
relatedGroup IgxTabsGroupComponent Gets the group associated with the tab.

Methods

The following method is available on the igx-tabs-group component:

Signature Return Type Description
select(focusDelay: number) void Selects the related IgxTabsGroupComponent. Default value of focusDelay is 50.

Additional Resources

Our community is active and always welcoming to new ideas.