Search results

Expand or collapse accordion items on checkbox click in Angular Accordion component

28 Jul 2021 / 2 minutes to read

By default, accordion items expand or collapse by clicking the accordion item header or clicking expand/collapse icon in accordion header.

You can also expand or collapse the accordion items through external button click. In the following example, when you change the checkbox provided then the accordion items will expand/collapse accordingly. This requirement can be achieved with the help of accordion’s click, expanding events, expandItem public method and checkbox’s change event.

Source
Preview
app.component.ts
app.module.ts
main.ts
app.component.html
index.css
Copied to clipboard
import { Component, ViewEncapsulation, Inject, ViewChild } from "@angular/core";
import {
  ExpandEventArgs,
  Accordion,
  AccordionClickArgs
} from "@syncfusion/ej2-navigations";
import { closest } from "@syncfusion/ej2-base";
import { AccordionComponent } from "@syncfusion/ej2-angular-navigations";
import { CheckBoxComponent } from "@syncfusion/ej2-angular-buttons";

@Component({
  selector: "app-container",
  templateUrl: "app/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.items.indexOf(e.item);
    if (index == 0 && !this.chk1Instance.checked) {
      e.cancel = true;
      return;
    }
    if (index == 1 && !this.chk2Instance.checked) {
      e.cancel = true;
      return;
    }
    if (index == 2 && !this.chk3Instance.checked) {
      e.cancel = true;
      return;
    }
  }
  public onClick(e) {
    this.clickEventArgs = e.originalEvent;
  }
  public changeHandler1() {
    this.clickEventArgs = null;
    this.acrdnInstance.expandItem(true, 0);
  }
  public changeHandler2() {
    this.clickEventArgs = null;
    this.acrdnInstance.expandItem(true, 1);
  }
  public changeHandler3() {
    this.clickEventArgs = null;
    this.acrdnInstance.expandItem(true, 2);
  }
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AccordionModule } from '@syncfusion/ej2-angular-navigations';
import { CheckBoxModule } from "@syncfusion/ej2-angular-buttons";
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, AccordionModule, CheckBoxModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<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($event)"
                ></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($event)"
                ></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($event)"
                ></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>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.ib {
    display: inline-block;
    padding-left: 6px;
  }