DevExtreme Angular dx-tab-panel with custom title template does not show

Question

I am using devextreme latest version (23.1) i am trying to create custom template for my tabs. here is how i am trying to create it but it does not show the title. i have reviewed the documentation but found nothing that chould solve this problem. tab panel does not show the title.

        <dx-tab-panel>
            <dxi-item titleTemplate="firstItemTitleTemplate">
                Item content
            </dxi-item>
            <div *dxTemplate="let data of 'firstItemTitleTemplate'">
                <b>First item title</b>
            </div>
        </dx-tab-panel>

Answer 1

Use the template and the tabTemplate property.

<dx-tab-panel>
  <dxi-item tabTemplate="tabTemplate1" template="itemTemplate1"></dxi-item>
  
  <div *dxTemplate="let item of 'tabTemplate1'">
    title content 1
  </div>
  <div *dxTemplate="let item of 'itemTemplate1'">
    item content 1
  </div>
  
  <dxi-item tabTemplate="tabTemplate2" template="itemTemplate2"></dxi-item>
  
  <div *dxTemplate="let item of 'tabTemplate2'">
    title content 2
  </div>
  <div *dxTemplate="let item of 'itemTemplate2'">
    item content 2
  </div>
</dx-tab-panel>

Alternative:

Use the template properties globally for the tab panel:

itemTemplate and itemTitleTemplate

<dx-tab-panel
  [dataSource]="[{id:1, text: 'text 1' },{id:2, text: 'text 2' },{id:3, text: 'text 3' }]"
  itemTitleTemplate="titleTemplate"
  itemTemplate="itemTemplate"
>
  <div *dxTemplate="let value of 'titleTemplate'" style="display: flex; flex-direction: column">
    <ng-container [ngSwitch]="value.id">
        <span *ngSwitchCase="1">my custom title 1</span>
        <span *ngSwitchCase="2">my custom title 2</span>
        <span *ngSwitchCase="3">my custom title 3</span>
    </ng-container>
    <span>title content for all tabs</span>
  </div>
  <div *dxTemplate="let value of 'itemTemplate'">
    <span>item content {{ value.text }}</span>
  </div>
</dx-tab-panel>