Multiple templates for TabPanel control in DevExtreme Angular

Question

I'm developing web project on DevExtreme (Angular "version") library. I have stuck with TabPanel control. There is example demo on developers site. But this demo uses one template for every panel.I need to use two-three different templates. For example, first tab contains datagrid, second tab contains charts and etc. Can anyone help me with that trouble?

Answer 1

Create desired template in view like

<div *dxTemplate="let company of 'tab1Template'">
   <div class="tabpanel-item">
      Tab1 custom template
   </div>
</div>

where tab1Template is the name of your custom template Then specify this template for your item by using template property

companies = [{
  "ID": 1,
  "CompanyName": "SuprMart",
  ...
  template: 'tab1Template' // this line
},
...

Plunker Example