TabTitleDirective

Represents the title template of the Kendo UI TabStrip. To define the template, nest a <ng-template> tag with the kendoTabTitle directive inside the component tag.

The kendoTabTitle directive overrides the TabStripTab title option.

ts

@Component({
    selector: 'my-app',
    template: `
        <kendo-tabstrip>
          <kendo-tabstrip-tab [selected]="true">
            <ng-template kendoTabTitle>
              <h4>Custom Title</h4>
            </ng-template>
            <ng-template kendoTabContent>
              <h3>Content 1</h3>
            </ng-template>
          </kendo-tabstrip-tab>

          <kendo-tabstrip-tab title="Sofia">
            <ng-template kendoTabContent>
              <h3>Content 2</h3>
            </ng-template>
          </kendo-tabstrip-tab>
        </kendo-tabstrip>
    `
})

class AppComponent {}

Selector

[kendoTabTitle]