ng- bootstrap accordion: Как добавить класс в оболочку nbg-pannel?

Question

Я хочу добавить класс ('open') к оболочке (ie. 'Card' class) селектора ngb-panel, когда ngb-panel развернута. Как мне этого добиться?

Согласно моему исследованию, я использовал событие

(panelChange)='panelShadow($event)' 

, чтобы получить активную панель (ie. Расширенная панель), как показано ниже:

{panelId: "panel2", nextState: true, preventDefault: ƒ}
panelId: "panel2"
nextState: true
preventDefault: ƒ ()
__proto__: Object

Теперь: я хочу добавить класс "open" с уже существующим классом .card к расширенной панели

Я хочу вывод, подобный этому ...

[stackblitz] Демонстрационная версия здесь

Answer 1

https://stackblitz.com/edit/angular-ng-bootstrap-ngb-accordion-expanded-shadow-problem

возможно, это не лучший подход, но он выполняет свою работу, расширяя свой собственный код, просто удаляя ненужный класс .open, добавляемый при закрытии каждой карты .

обновление : сделать фрагмент совместимым с активной панелью по умолчанию ... 1. cardClass="open", добавленный к элементу ngb-panel активной панели 2. основной лог c обновлен следующим образом

import { Component, ViewChild, ElementRef, Renderer2 } from "@angular/core";

export interface NgbPanelChangeEvent {
  nextState: boolean;
  panelId: string;
  preventDefault: () => void;
}

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  lastPanelId: string = null;
  defaultPanelId: string = "panel2";

  panelShadow($event: NgbPanelChangeEvent, shadow) {
    console.log($event);

    const { nextState } = $event;

    const activePanelId = $event.panelId;
    const activePanelElem = document.getElementById(activePanelId);

    if (!shadow.isExpanded(activePanelId)) {
      activePanelElem.parentElement.classList.add("open");
    }

    if(!this.lastPanelId) this.lastPanelId = this.defaultPanelId;

    if (this.lastPanelId) {
      const lastPanelElem = document.getElementById(this.lastPanelId);

      if (this.lastPanelId === activePanelId && nextState === false)
        activePanelElem.parentElement.classList.remove("open");
      else if (this.lastPanelId !== activePanelId && nextState === true) {
        lastPanelElem.parentElement.classList.remove("open");
      }

    }

    this.lastPanelId = $event.panelId;
  }
}