How to use Tabs using DevExtream in angular

Overview : 

The Tabs component allows you to create a tabbed UI to navigate between pages or views. You can create tab items in the items array, or populate tab items from a datasource.

Configure Overflow Behavior :

The Tabs component stretches to fit its container if you do not specify the component’s width. When the total tab width exceeds the component’s width, navigation buttons appear. A user can click these buttons to scroll through the tabs. Use the showNavButtons and scrollByContent properties to control this behavior.

Customize Tab Contents and Appearance:

You can initialize a tab’s contents (text, icons and badges) with values from underlying data objects. This example demonstrates this technique. You can also specify an item template (itemTemplate) to customize tabs.


<div id="longtabs">
  <div class="caption">Tabs</div>
  <dx-tabs [dataSource]="longtabs"></dx-tabs>
<div id="scrolledtabs">
  <div class="caption">Tabs with Overflow</div>
<div id="tabs">
  <div class="caption">API</div>
  <div class="content dx-fieldset">
    <div class="dx-field">
      <div class="dx-field-label">Selected index:</div>
      <div class="dx-field-value">
    <div class="dx-field">
      <div class="dx-field-label">Selected content:</div>
      <div class="dx-field-value-static left-aligned">
        {{ tabContent }}


import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { DxTabsModule, DxSelectBoxModule } from 'devextreme-angular';

import { Tab, Longtab, Service } from './app.service';

if (!/localhost/.test( {

  selector: 'demo-app',
  templateUrl: 'app/app.component.html',
  styleUrls: ['app/app.component.css'],
  providers: [Service],
export class AppComponent {
  longtabs: Longtab[];

  tabs: Tab[];

  tabContent: string;

  constructor(service: Service) {
    this.longtabs = service.getLongtabs();
    this.tabs = service.getTabs();
    this.tabContent = this.tabs[0].content;

  selectTab(e) {
    this.tabContent = this.tabs[e.itemIndex].content;

  imports: [
  declarations: [AppComponent],
  bootstrap: [AppComponent],
export class AppModule { }



import { Injectable } from '@angular/core';

export class Tab {
  id: number;

  text: string;

  icon: string;

  content: string;

export class Longtab {
  text: string;

const tabs: Tab[] = [
    id: 0,
    text: 'user',
    icon: 'user',
    content: 'User tab content',
    id: 1,
    text: 'comment',
    icon: 'comment',
    content: 'Comment tab content',
    id: 2,
    text: 'find',
    icon: 'find',
    content: 'Find tab content',

const longtabs: Longtab[] = [
  { text: 'user' },
  { text: 'analytics' },
  { text: 'customers' },
  { text: 'search' },
  { text: 'favorites' },
  { text: 'additional' },
  { text: 'clients' },
  { text: 'orders' },
  { text: 'shipment' },

export class Service {
  getTabs(): Tab[] {
    return tabs;

  getLongtabs(): Longtab[] {
    return longtabs;

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories