Automatically make controls under header collapsible (accordion style)

See more:

HTML

bootstrap

Typescript

, +

I am new to typescript and RxJS. As you see in the attached photo in the link, I have a dynamic form on the right side which contains multiple controls; A header and three input-string controls. the form can be dynamically modified by the JSON script on the left side (controls and be added and existing controls and be deleted). I want to put all controls under the heading in an accordion-like style. In this case, every time a header is added, all components under it will be collapsible.

Capture — ImgBB[^]

What I have tried:

I am trying to use ng-accordion as the following

<ng-container *ngIf="def.type === 'heading'; else formControl">
  <ngb-accordion #acc="ngAccordion" activeIds="ngb-panel-0">
    <ngb-panel title="Input-SSA">
      <ng-template ngPanelContent>
        The rest of types to be under the accordion
      </ng-template>
    </ngb-panel>
  </ngb-accordion>
</ng-container>

But the app fails to compile with this error message:

1. If 'ngb-accordion' is an Angular component, then verify that it is part of this module.

What am I doing wrong?