How to use structural directives in our Angular Accordion control
Our Angular Accordion component allows you render structural directives using structural directives in your application like regular Angular components. This section explains how to use them to render this Accordion in your project.
<ng-template>
Accordion is provided with the <ng-template> support for both its header and content properties. You can use this ng-template to render both these properties. You can also render another component in the Accordion control.
<ejs-accordion> <e-accordionitems> <e-accordionitem expanded="true"> <ng-template #header> <div>Calender</div> </ng-template> <ng-template #content> <div> <ejs-calendar></ejs-calendar> </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>DatePicker</div> </ng-template> <ng-template #content> <div> <ejs-datepicker></ejs-datepicker> </div> </ng-template> </e-accordionitem> <e-accordionitem> <ng-template #header> <div>DateTimePicker</div> </ng-template> <ng-template #content> <div> <ejs-datetimepicker></ejs-datetimepicker> </div> </ng-template> </e-accordionitem> </e-accordionitems> </ejs-accordion>
You can find the demo sample.
<ng-for>
The ng-for is like for loop; it is used to iterate the element. You can use the ng-for conditional structural directive in our Accordion as demonstrated in the following code.
<ejs-accordion expandMode="Single">
<e-accordionitems>
<e-accordionitem *ngFor="let item of serviceList;">
<ng-template #header>
<div id="header">{{item.name}}</div>
</ng-template>
<ng-template #content>
<li *ngFor="let sub of item.subdata">{{sub.name}}</li>
</ng-template>
</e-accordionitem>
</e-accordionitems>
</ejs-accordion>
You can find the sample.
<ng-if>
The ng-if is the simplest structural directive; it takes Boolean values to make the element appear or disappear in DOM. This is also supported in our Angular Accordion directive and item directives.
<ejs-accordion expandMode="Single">
<e-accordionitems>
<e-accordionitem *ngFor="let item of serviceList;">
<ng-template #header [ngIf]="item.render">
<div id="header">{{item.name}}</div>
</ng-template>
<ng-template #content [ngIf]="item.render">
<li *ngFor="let sub of item.subdata">{{sub.name}}</li>
</ng-template>
</e-accordionitem>
</e-accordionitems>
</ejs-accordion>
You can find the sample.
You can use the above all directives (<ng-if>, <ng-for>, and <ng-template>) to render the Accordion control. In this following sample, the Accordion items are iterated using the <ng-for> directive, and the item is checked using <ng-if>. Finally, the data is shown using <ng-template>.
<ejs-accordion expandMode="Single">
<e-accordionitems>
<e-accordionitem *ngFor="let item of serviceList;">
<ng-template #header>
<div id="header">{{item.name}}</div>
</ng-template>
<ng-template #content [ngIf]="item.render">
<li *ngFor="let sub of item.subdata">{{sub.name}}</li>
</ng-template>
</e-accordionitem>
</e-accordionitems>
</ejs-accordion>
You can find the sample.
