Implement Tab In Angular Using Dev-Extreme

Overview : 

Tabs divide content into distinct views, each of which can only be seen at once. The labels of each tab are displayed in the tab header, and the label of the active tab is indicated by the dynamic ink bar. Pagination controls that allow the user to scroll left and right across the tab labels appear when the list of tab labels is longer than the width of the header.

If you don’t provide the Tabs component’s width, it enlarges to fit its container. Navigation buttons show up when the overall tab width is greater than the component’s width. These buttons can be used by the user to scroll through the tabs. To modify this behavior, use the scrollByContent and shown button attributes.

Here is an example :

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>
    <div class="dx-field">
      <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[
{ text: 'user' },
{ text: 'analytics' },
{ text: 'customers' },
{ text: 'search' },
{ text: 'favorites' },
{ text: 'additional' },
{ text: 'clients' },
{ text: 'orders' },
{ text: 'shipment' },
];

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

  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);

Output :