Control Accordion with checkbox in Angular Accordion component
17 Sep 202512 minutes to read
The Angular Accordion component typically expands or collapses items when clicking their headers or expand/collapse icons. However, you can control this behavior programmatically using a checkbox to toggle multiple items simultaneously, which is useful for centralized control in forms or dashboards.
To implement this, ensure the @syncfusion/ej2-angular-navigations and @syncfusion/ej2-angular-buttons packages are installed. Use the Accordion’s click and expanding events, along with the expandItem method, to manage item states. The checkbox’s change event triggers the logic to expand or collapse items based on its state.
The example below demonstrates a checkbox controlling the expand/collapse state of Accordion items.
<div class="control-section accordion-control-section">
<div class="e-sample-resize-container">
<!-- Render the Accoridon Component -->
<ejs-accordion
#element
(expanding)="expanding($event)"
(clicked)="onClick($event)"
>
<e-accordionitems>
<e-accordionitem>
<ng-template #header>
<div class="ib">
<ejs-checkbox
#checkbox1
(change)="changeHandler1()"
></ejs-checkbox>
</div>
<div class="ib">ASP.NET</div>
</ng-template>
<ng-template #content>
<div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET
Framework for building Web applications and XML Web services.
ASP.NET pages execute on the server and generate markup such as
HTML, WML, or XML that is sent to a desktop or mobile browser.
ASP.NET pages use a compiled,event-driven programming model that
improves performance and enables the separation of application
logic and user interface.
</div>
</ng-template>
</e-accordionitem>
<e-accordionitem>
<ng-template #header>
<div class="ib">
<ejs-checkbox
#checkbox2
(change)="changeHandler2()"
></ejs-checkbox>
</div>
<div class="ib">ASP.NET MVC</div>
</ng-template>
<ng-template #content>
<div>
The Model-View-Controller (MVC) architectural pattern separates an
application into three main components: the model, the view, and
the controller. The ASP.NET MVC framework provides an alternative
to the ASP.NET Web Forms pattern for creating Web applications.
The ASP.NET MVC framework is a lightweight, highly testable
presentation framework that (as with Web Forms-based applications)
is integrated with existing ASP.NET features, such as master pages
and membership-based authentication.
</div>
</ng-template>
</e-accordionitem>
<e-accordionitem>
<ng-template #header>
<div class="ib">
<ejs-checkbox
#checkbox3
(change)="changeHandler3()"
></ejs-checkbox>
</div>
<div class="ib">JavaScript</div>
</ng-template>
<ng-template #content>
<div>
JavaScript (JS) is an interpreted computer programming language.It
was originally implemented as part of web browsers so that
client-side scripts could interact with the user, control the
browser, communicate asynchronously, and alter the document
content that was displayed.More recently, however, it has become
common in both game development and the creation of desktop
applications.
</div>
</ng-template>
</e-accordionitem>
</e-accordionitems>
</ejs-accordion>
</div>
</div>import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AccordionModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewEncapsulation, Inject, ViewChild } from "@angular/core";
import {
ExpandEventArgs,
Accordion,
AccordionClickArgs
} from "@syncfusion/ej2-navigations";
import { closest } from "@syncfusion/ej2-base";
import { AccordionComponent, AccordionItemModel } from "@syncfusion/ej2-angular-navigations";
import { CheckBoxComponent, CheckBoxModule } from "@syncfusion/ej2-angular-buttons";
@Component({
imports: [
AccordionModule, CheckBoxModule
],
standalone: true,
selector: "app-container",
templateUrl: "./app.component.html"
})
export class AppComponent {
@ViewChild("element") acrdnInstance?: AccordionComponent;
@ViewChild("checkbox1") chk1Instance?: CheckBoxComponent;
@ViewChild("checkbox2") chk2Instance?: CheckBoxComponent;
@ViewChild("checkbox3") chk3Instance?: CheckBoxComponent;
public clickEventArgs?: Event;
public expanding(e: ExpandEventArgs) {
if (this.clickEventArgs) {
let header = closest(
this.clickEventArgs.target as Element,
".e-acrdn-header"
);
let checkboxEle = closest(
this.clickEventArgs.target as Element,
".e-checkbox-wrapper"
);
if (header && !checkboxEle) {
e.cancel = true;
return;
}
}
let index = (this.acrdnInstance as AccordionComponent).items.indexOf(e.item as AccordionItemModel);
if (index == 0 && !(this.chk1Instance as CheckBoxComponent).checked) {
e.cancel = true;
return;
}
if (index == 1 && !(this.chk2Instance as CheckBoxComponent).checked) {
e.cancel = true;
return;
}
if (index == 2 && !(this.chk3Instance as CheckBoxComponent).checked) {
e.cancel = true;
return;
}
}
public onClick(e: any) {
this.clickEventArgs = e.originalEvent;
}
public changeHandler1() {
this.clickEventArgs = null as any;
(this.acrdnInstance as AccordionComponent).expandItem(true, 0);
}
public changeHandler2() {
this.clickEventArgs = null as any;
(this.acrdnInstance as AccordionComponent).expandItem(true, 1);
}
public changeHandler3() {
this.clickEventArgs = null as any;
(this.acrdnInstance as AccordionComponent).expandItem(true, 2);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));