Hi AC,
Thanks for contacting Syncfusion support.
Yes, is it possible to add content like Calendar or ComboBox component with all functionalities (not only plain HTML element) to our Essential JS 2 Angular Tab.
Option 1:
You can achieve this in our tab using the ng-template inside the ‘e-tabitem’ tag with #content attribute, which is mandatory to render content. And in this content we can render our desired components directly with all their functionalities. Please refer to the following code.
|
<ejs-tab id="element">
<e-tabitems>
<e-tabitem [header]='headerText[0]'>
<ng-template #content>
<ejs-calendar [value]='dateValue' [min]='minDate' [max]='maxDate'></ejs-calendar>
</ng-template>
</e-tabitem>
<e-tabitem [header]='headerText[1]'>
<ng-template #content>
<ejs-combobox id='comboelement' #samples [dataSource]='data' [placeholder]='text'></ejs-combobox>
</ng-template>
</e-tabitem>
</e-tabitems>
</ejs-tab>
|
Option 2:
You can also define the tab content in HTML and set style “display:none” for it and assign the element’s id to the Tab item’s content as template . Please refer to the following code.
|
HTML
<div id="calender-section" style="display:none">
<div class="control-section">
<ejs-calendar [value]='dateValue' [min]='minDate' [max]='maxDate'></ejs-calendar>
</div>
</div>
<div id="combobox-section" style="display:none">
<div class="control-section">
<ejs-combobox id='comboelement' #samples [dataSource]='data' [placeholder]='text'></ejs-combobox>
</div>
</div>
<ejs-tab id="element" #tab [items]='tabItems'>
</ejs-tab>
TS:
public tabItems: Object[] = [
{
header: { 'text': 'Calender' },
content: '#calender-section' // refer the div id here
},
{
header: { 'text': 'ComboBox' },
content: '#combobox-section'
}
];
|
Please find the below getting started UG and API link for more references for our Tab component.
Please check the shared samples and details and let us know if you have any further queries.
Regards,
M. Balaji
