Angular - Multiple accordions in the same view

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());
    }
  }
}