All Components

Tabs

You can instantiate the TabStrip tabs by initializing them as KendoTabStripTab components and use their corresponding properties.

The TabStrip provides configuration options for:

Titles

You can handle the title of each TabStrip tab by using the title attribute of the tab. Apart from plain text, a tab title can also accommodate any Angular component.

@Component({
  selector: 'my-app',
  template: `
      <kendo-tabstrip>
        <kendo-tabstrip-tab [title]="'Tab 1 Title'">
          <ng-template kendoTabContent>
            <p>Tab 1 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tab 2 Title'">
          <ng-template kendoTabContent>
            <p>Tab 2 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tab 3 Title'">
          <ng-template kendoTabContent>
            <p>Tab 3 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
    `,
    styles: [`
        kendo-tabstrip p {
            margin: 0;
            padding: 8px;
        }
    `]
})

class AppComponent {}

Tabs on Initial Loading

The TabStrip displays no tabs upon its initial loading. To change this behavior, set the selected property of the tab.

@Component({
  selector: 'my-app',
  template: `
      <kendo-tabstrip>
        <kendo-tabstrip-tab [title]="'Tab 1'">
          <ng-template kendoTabContent>
            <p>Tab 1 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tab 2'" [selected]="true">
          <ng-template kendoTabContent>
            <p>Tab 2 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tab 3'">
          <ng-template kendoTabContent>
            <p>Tab 3 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
    `,
    styles: [`
        kendo-tabstrip p {
            margin: 0;
            padding: 8px;
        }
    `]
})
class AppComponent {}

Disabled State

You can disable a specific TabStrip tab by setting the disabled property to true.

@Component({
  selector: 'my-app',
  template: `
    <kendo-tabstrip>
        <kendo-tabstrip-tab [title]="'Tab 1'">
          <ng-template kendoTabContent>
            <p>Tab 1 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tab 2 (disabled)'" [disabled]="true">
          <ng-template kendoTabContent>
            <p>Tab 2 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Tab 3'">
          <ng-template kendoTabContent>
            <p>Tab 3 Content</p>
          </ng-template>
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
    `,
    styles: [`
        kendo-tabstrip p {
            margin: 0;
            padding: 8px;
        }
    `]
})
class AppComponent {}
In this article