How To Close All The Menus Inside An Accordion In Angular 4

I am new to angular 4 here I have an accordion in the structure of Category,Group and Subgroup. If I clicked on category it shows all the groups in it and if I clicked on the group

Solution 1:

i don't believe it's possible to achieve what you are looking for just by using href and ids, because href takes only one argument. Check here.

I added event bindings to check when the parent accordion is being toggled to close all the child accordions too.

Added a click event here:

<aclass="accordion-toggle h6"data-toggle="collapse"data-parent="#accordion1" (click)="onToggle()"href="#collapseTwo + i">
        {{data?.CAMD_ENTITY_DESC}}
    </a>

and used a ngIf here:

<div [id]="'collapseInnerTwo' + j"  *ngIf="accordion2==true"class="accordion-body collapse" style="margin-left:10px;margin-top:3px">

Check the full solution here: https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-fjowve?file=app/app.component.html