Angular Tabs - Getting Started
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.
- <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:
- <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:
- <dx-tabs ...
- [selectedIndex]="2"
- selectionMode="multiple"
- >
- <!-- ... -->
- </dx-tabs>
Handle Tab Click
Use the onItemClick function to process clicks on tabs.
- <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
- );
- };
If you have technical questions, please create a support ticket in the DevExpress Support Center.