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.

app.component.html

<div id="longtabs">
  <div class="caption">Tabs</div>
  <dx-tabs [dataSource]="longtabs"></dx-tabs>
</div>
<div id="scrolledtabs">
  <div class="caption">Tabs with Overflow</div>
  <dx-tabs
    [dataSource]="longtabs"
    [width]="300"
    [scrollByContent]="true"
    [showNavButtons]="true"
  ></dx-tabs>
</div>
<div id="tabs">
  <div class="caption">API</div>
  <dx-tabs
    #apiTabs
    [dataSource]="tabs"
    [selectedIndex]="0"
    (onItemClick)="selectTab($event)"
  ></dx-tabs>
  <div class="content dx-fieldset">
    <div class="dx-field">
      <div class="dx-field-label">Selected index:</div>
      <div class="dx-field-value">
        <dx-select-box
          [dataSource]="tabs"
          displayExpr="text"
          valueExpr="id"
          (onItemClick)="selectTab($event)"
          [(value)]="apiTabs.selectedIndex"
        ></dx-select-box>
      </div>
    </div>
    <div class="dx-field">
      <div class="dx-field-label">Selected content:</div>
      <div class="dx-field-value-static left-aligned">
        {{ tabContent }}
      </div>
    </div>
  </div>
</div>

app.component.ts

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(document.location.host)) {
  enableProdMode();
}

@Component({
  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;
  }
}

@NgModule({
  imports: [
    BrowserModule,
    DxTabsModule,
    DxSelectBoxModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

app.service.ts

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' },
];

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

  getLongtabs(): Longtab[] {
    return longtabs;
  }
}