Angular TabPanel - Getting Started

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

The TabPanel UI component consists of the Tabs and MultiView components. The TabPanel automatically synchronizes the selected tab with the currently displayed view and vice versa.

This tutorial explains how to add a TabPanel to a page and configure its core features. The following control demonstrates the result:

Refer to the sections below for more information about each configuration step. The full code is available in the GitHub repository.

View on GitHub

Create the TabPanel

Add DevExtreme to your Angular application and use the following code to create a TabPanel:

app.component.html
app.component.ts
app.module.ts
app.component.css
  • <dx-tab-panel id="tabPanel">
  • <!-- Configuration goes here -->
  • </dx-tab-panel>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  •  
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxTabPanelModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxTabPanelModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }
  • #tabPanel {
  • height: 250px;
  • width: 500px;
  • }

Create Tabs

Populate the items array with data items. The TabPanel generates a tab with a view for each item in this array.

Specify a tab's title and/or icon properties to configure an individual tab. The code below uses icons from the DevExtreme icon library. You can also use the badge property to create a badge with custom text.

app.component.html
  • <dx-tab-panel>
  • <dxi-item title="Employee" icon="floppy">
  • <!-- ... -->
  • </dxi-item>
  • <dxi-item title="Notes" icon="comment">
  • <!-- ... -->
  • </dxi-item>
  • <dxi-item title="Role" icon="isnotblank" badge="new">
  • <!-- ... -->
  • </dxi-item>
  • </dx-tab-panel>

The code above produces the following output:

DevExtreme TabPanel: Customized Tabs

You can also use the itemTitleTemplate property to specify a custom template for all tabs. items.tabTemplate overrides the itemTitleTemplate property and allows you to specify a template for an individual tab. This approach is not shown in this tutorial, but you can refer to the property descriptions for details.

Specify View Content

You can use the following properties to specify view content:

  • itemTemplate
    Specifies a custom template for all views.

  • items[].template
    Specifies a custom template for an individual view. This property overrides itemTemplate.

  • items[].text
    Specifies text displayed in an individual view.

  • noDataText
    Specifies text or markup to display when views do not have content.

This tutorial demonstrates the use of the items[].template property. This property allows you to specify different content for individual views. In the code below, the views contain the Form, TextArea, and RadioGroup UI components.

app.component.html
app.component.ts
app.module.ts
  • <dx-tab-panel>
  • <dxi-item title="Employee" icon="floppy">
  • <div *dxTemplate>
  • <dx-form
  • id="form"
  • [formData]="employeeData"
  • >
  • <dxi-item dataField="name">
  • <dxo-label template="name"></dxo-label>
  • </dxi-item>
  • <dxi-item dataField="position">
  • <dxo-label template="position"></dxo-label>
  • </dxi-item>
  • <<dxi-item dataField="hireDate"></dxi-item>
  • <dxi-item dataField="officeNumber">
  • <dxo-label template="officeNumber"></dxo-label>
  • </dxi-item>
  • <ng-container *ngFor="let label of labelTemplates">
  • <div *dxTemplate="let data of label.name">
  • <div><i class="dx-icon {{ label.icon }}"></i>{{ data.text }}</div>
  • </div>
  • </ng-container>
  • </dx-form>
  • </div>
  • </dxi-item>
  • <dxi-item title="Notes" icon="comment">
  • <div *dxTemplate>
  • <dx-text-area
  • [(value)]="employeeData.notes">
  • </dx-text-area>
  • </div>
  • </dxi-item>
  • <dxi-item title="Role" icon="isnotblank" badge="new">
  • <div *dxTemplate>
  • <dx-radio-group
  • [items]="employeeData.roles"
  • [(value)]="employeeData.roles[0]">
  • </dx-radio-group>
  • </div>
  • </dxi-item>
  • </dx-tab-panel>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • employeeData = {
  • name: 'John Heart',
  • position: 'CEO',
  • hireDate: new Date(2012, 4, 13),
  • officeNumber: 901,
  • notes: 'John has been in the Audio/Video industry since 1990. He has led DevAV as its CEO since 2003.',
  • roles: ['Chief Officer', 'Administrator', 'Manager']
  • }
  • labelTemplates = [
  • {name: 'name', icon: 'dx-icon-info'},
  • {name: 'position', icon: 'dx-icon-group'},
  • {name: 'officeNumber', icon: 'dx-icon-info'}
  • ]
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import {
  • DxTabPanelModule,
  • DxFormModule,
  • DxTextAreaModule,
  • DxRadioGroupModule
  • } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxTabPanelModule,
  • DxFormModule,
  • DxTextAreaModule,
  • DxRadioGroupModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

Navigate Between Tabs

Specify the following properties to configure navigation between tabs:

  • swipeEnabled
    Specifies whether users can switch between views with the swipe gesture.

  • loop
    Specifies whether to loop views.

  • animationEnabled
    Specifies whether to animate the change of the current view.

  • selectedIndex
    Specifies the index of the currently selected tab. Use this property to switch between tabs programmatically. In this tutorial, this property's value depends on the the RadioGroup's selected item (see tabSwitcherRadioGroup).

app.component.html
app.component.ts
  • <dx-tab-panel
  • [loop]="true"
  • [animationEnabled]="true"
  • [swipeEnabled]="true"
  • [(selectedIndex)]="selectedTabIndex">
  • <!-- ... -->
  • </dx-tab-panel>
  •  
  • <dx-radio-group
  • [items]="tabNames"
  • [value]="tabNames[selectedTabIndex]"
  • layout="horizontal"
  • (onValueChanged)="onValueChanged($event)">
  • </dx-radio-group>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • // ...
  •  
  • tabNames = ["Employee", "Notes", "Role"]
  •  
  • selectedTabIndex = 0;
  •  
  • onValueChanged(e){
  • this.selectedTabIndex = this.tabNames.indexOf(e.value);
  • }
  • }

For further information on the TabPanel UI component, refer to the following resources: