How add button in Accordion Header

[Sarvana]

I have an accordion which works smooth. I need to add the button in the header of the accordion. nearby toggle arrow(up/down). I tried to add a button after the content, but its even displaying.

Here is my code for your reference

<div>

<ejs-accordion>

<e-accordionitems>

<e-accordionitem header='Location' [content]='content1' class="e-control e-btn e-small e-round e-primary e-icon-btn"></e-accordionitem>

<e-accordionitem header='Users' [content]='content2'></e-accordionitem>

<e-accordionitem header='Rate' [content]='content3'></e-accordionitem>

</e-accordionitems>

</ejs-accordion>

<ng-template #content1>

<div class="row">

<div class="col-md-10"></div>

<div class="col-md-2">

<button ejs-button cssClass="e-info pull-right" rel='nofollow' href="" routerLink='/CreateUser/{{organizationModel.CompanyId}}'>

<span class="fa fa-plus"></span> ADD</button> &nbsp;

<button id="roundbtn" class="e-control e-btn e-small e-round e-primary e-icon-btn" data-ripple="true">

<span class="e-btn-icon e-icons e-add-icon"></span>

</button>

</div>

</div>

<div class="content bg-white">

<ejs-grid id="Grid" [dataSource]='data' [allowPaging]='true' [allowSorting]='true' [pageSettings]='pageSettings' [toolbar]='toolbar'>

<e-columns>

<e-column field='LocationTitle' headerText='LOCATION' width=60></e-column>

<e-column field='Description' headerText='DESCRIPTION' width=60></e-column>

</e-columns>

</ejs-grid>

</div>

</ng-template>

<ng-template #content2>

</ng-template>

<ng-template #content3>

</ng-template>

[Buvana Sathasivam]

Hi Sarvana, 

Thanks for using Syncfusion products. 

We have rendered Accordion component with a button using header ng-template.  If you wish to render button in accordion header items, you can use the header ng-template and customized css using cssClass property.  Please find the below code. 

app.component.html 

<ejs-accordion (expanding)="onExpanding($event)"> 

    <e-accordionitems> 

        <e-accordionitem expanded='true' [header]="header1" [content]='content1' cssclass="e-custom"></e-accordionitem>  // template header and cssClass 

         ………… 

     </e-accordionitems> 

</ejs-accordion> 

 

<ng-template #header1>  // Header1 template 

    ASP.NET 

    <button (click)="btnClick($event)" id="but1" ejs-button [isPrimary]="true">Asp.net</button>    // Render Button 

</ng-template> 

app.component.css 

#but1, #but2, #but3 {   // You can set alignment of button in header 

  float: right; 

} 

 

.e-custom .e-acrdn-header-content {  // Also, set accordion header content width to 100% 

  width: 100%; 

} 

We have prevented expand/collapse behavior when accordion header button is clicked in the following code. 

app.component.ts 

import { AccordionModule, ExpandEventArgs } from '@syncfusion/ej2-ng-navigations'; 

 

export class AppComponent { 

 

    public isButtonElement: boolean;   

 

    public btnClick(e) {   // Triggered when accordion header button is clicked 

        this.isButtonElement = true; 

    } 

    public onExpanding(e: ExpandEventArgs) { // Triggered when click accordion header 

        if (this.isButtonElement) { 

            e.cancel = true;   // Prevented expand and collapse behavior of accordion 

            this.isButtonElement =false; 

        } 

    } 

} 

Please find the below stackblitz link. 

https://stackblitz.com/edit/angular-cbpa4f?file=src%2Fapp%2Fapp.component.ts  

API links: 

https://ej2.syncfusion.com/documentation/accordion/api-accordionItem.html?lang=typescript#cssclass  

https://ej2.syncfusion.com/documentation/accordion/api-accordionItem.html?lang=typescript#header   

Regards, 

Buvana S