Angular Tabs - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

The Tabs component allows you to create a tabbed UI to navigate between pages or views.

This tutorial shows how to add a Tabs component to your application and configure its core features.

Each section in this tutorial describes a single configuration step. You can also find the full code in the following GitHub repository: getting-started-with-tabs.

Create Predefined Tabs

You can create tab items in the items array, or populate tab items from a dataSource. This tutorial uses the first technique. To see how to use the dataSource, refer to the following demo: Tabs Overview Demo.

You can use predefined item features to customize the items. The code below creates a Tabs component with a fixed width and populates it with three items. The first item has a badge. The second item uses text and is disabled. The third item has an icon.

app.component.html
app.module.ts
  • <dx-tabs
  • [width]="300"
  • >
  • <dxi-item
  • badge="First"
  • >
  • </dxi-item>
  • <dxi-item
  • text="Second"
  • [disabled]="true"
  • >
  • </dxi-item>
  • <dxi-item
  • text="Third"
  • icon="favorites"
  • >
  • </dxi-item>
  • </dx-tabs>
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxTabsModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxTabsModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

Create Custom Tabs

Use an itemTemplate to apply customization to all items. To customize an individual item, specify a custom template.

The following code adds a fourth custom tab:

app.component.html
app.component.css
  • <dx-tabs>
  • <!-- ... -->
  • <dxi-item>
  • <div *dxTemplate>
  • <div id="fourth">Fourth</div>
  • </div>
  • </dxi-item>
  • </dx-tabs>
  • #fourth {
  • text-align: center;
  • font-style: italic;
  • color: #F05B41;
  • }

Specify Selection Mode

Users can select Tabs component items in two different modes: 'single' (default) or 'multiple'. You can use the selectionMode property to change the mode. To preselect or to select an item programmatically, pass its index in the data source array to the selectedIndex property. As an alternative, you can use the selectedItem (for 'single' selection mode) or selectedItems (for 'multiple' selection mode) properties.

The following code sets the selectionMode to 'multiple' and preselects the third tab:

app.component.html
  • <dx-tabs ...
  • [selectedIndex]="2"
  • selectionMode="multiple"
  • >
  • <!-- ... -->
  • </dx-tabs>

Handle Tab Click

Use the onItemClick function to process clicks on tabs.

app.component.html
app.component.ts
  • <dx-tabs
  • (onItemClick)="onItemClick($event)"
  • >
  • <!-- ... -->
  • </dx-tabs>
  • import { Component } from '@angular/core';
  • import notify from 'devextreme/ui/notify';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • onItemClick(e: any) {
  • showMessage(e.itemIndex + 1);
  • }
  • }
  •  
  • function showMessage(id: number) {
  • notify(
  • {
  • message: `Tab ${id} has been clicked!`,
  • width: 250
  • },
  • 'info',
  • 500
  • );
  • };