Topic: Angular - Multiple accordions in the same view
gitllon pro asked 11 months ago
I hope you are fine. In an angular view I have 3 accordions. Expected behavior: if one accordion is deployed, the other two will contract.Sorry for the inconvenience, but I can only find examples for the mdb-accordion-item and not for mdb-accordion.
For example, i have:
<div>
<mdb-accordion #accordion1>
<mdb-accordion-item>
...
</mdb-accordion-item>
</mdb-accordion>
<mdb-accordion #accordion2>
<mdb-accordion-item>
...
</mdb-accordion-item>
</mdb-accordion>
<mdb-accordion #accordion3>
<mdb-accordion-item>
...
</mdb-accordion-item>
</mdb-accordion>
</div>
If #accordion1 its open => #accordion2 and #accordion3 closed.
Rafał Seifert free answered 11 months ago
In order to achieve such effect you can add a callback function to itemShow event that will trigger closing other items. You can add event binding inside template or through component's class. Here are examples how to achieve that:
Here is example with template binding:
<mdb-accordion>
<mdb-accordion-item (itemShow)="collapseOtherItems($event)">
<ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
<ng-template mdbAccordionItemBody> This is the first item's accordion body.</ng-template>
</mdb-accordion-item>
<mdb-accordion-item (itemShow)="collapseOtherItems($event)">
<ng-template mdbAccordionItemHeader>Accordion Item #2</ng-template>
<ng-template mdbAccordionItemBody> This is the second item's accordion body.</ng-template>
</mdb-accordion-item>
</mdb-accordion>
<mdb-accordion>
<mdb-accordion-item (itemShow)="collapseOtherItems($event)">
<ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
<ng-template mdbAccordionItemBody> This is the first item's accordion body.</ng-template>
</mdb-accordion-item>
<mdb-accordion-item (itemShow)="collapseOtherItems($event)">
<ng-template mdbAccordionItemHeader>Accordion Item #2</ng-template>
<ng-template mdbAccordionItemBody> This is the second item's accordion body.</ng-template>
</mdb-accordion-item>
</mdb-accordion>
Callback function:
@ViewChildren(MdbAccordionItemComponent) accordionItems: QueryList<MdbAccordionItemComponent>;
collapseOtherItems(activeItem: MdbAccordionItemComponent): void {
if (this.accordionItems) {
const otherItems = this.accordionItems.toArray().filter((item) => item !== activeItem);
otherItems.forEach((item) => item.hide());
}
}
And here is example with event binding inside component's class:
import { AfterViewInit, Component, DestroyRef, QueryList, ViewChildren } from '@angular/core';
import { MdbAccordionItemComponent } from 'mdb-angular-ui-kit/accordion';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({
selector: 'app-accordion',
templateUrl: './accordion.component.html',
styleUrls: ['./accordion.component.scss'],
})
export class AccordionComponent implements AfterViewInit {
@ViewChildren(MdbAccordionItemComponent) accordionItems: QueryList<MdbAccordionItemComponent>;
constructor(private destroyRef: DestroyRef) {}
ngAfterViewInit(): void {
const items = this.accordionItems.toArray();
items.forEach((item) => {
item.itemShow.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((activeItem) => {
this.collapseOtherItems(activeItem);
});
});
}
collapseOtherItems(activeItem: MdbAccordionItemComponent): void {
if (this.accordionItems) {
const otherItems = this.accordionItems.toArray().filter((item) => item !== activeItem);
otherItems.forEach((item) => item.hide());
}
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 5.0.0
- Device: macbook
- Browser: chrome
- OS: mac os ventura 13
- Provided sample code: No
- Provided link: No