Accordion : Work with dynamic CSS class

Bug description:

I want the panels to be clickable but without content.

The idea would be to retrieve the panel that I just click / select in order to pass it in active class and change its color to differentiate it from others.

And of course if I click on another panel, disable / deselect the one that was active before.

So I try to work with dynamic classes in a ngb panel selector but without the [disable] =" true " entry.

When I click on a panel, I print it in the console (example Plunker). Which allows me to identify it.

I tried a lot of things like: [class.active]="true == this.tabSelected.indexOf(item.id) > -1" [ngClass]="'selected'" [class.first-item]="first" [class.last-item]="last" Into following example:

                <!-- Example -->
                <ngb-accordion #acc="ngbAccordion" >
                <!--Dynamic class into this ngb-panel -->
                  <ngb-panel *ngFor=" let child of child.children; let k = index; let first = first; let last = last"  [disabled]="true"  id="test-{{child.id}}" >
                    <ng-template ngbPanelTitle >
                      <div (click)="setClickedRow(j,k)" style="float:left;">
                        {{ child.name }}
                      </div>
                      <button class="btn btn-sm btn-outline-light" style="float:right;">{{ child.price }} €</button>
                    </ng-template>
                    <ng-template ngbPanelContent> 
                    </ng-template>
                  </ngb-panel>
                </ngb-accordion>                  
                <!-- Example  -->

I tried to use [ngClass] = 'selected' in ngb-accordion selector and the css class was changed by “selected”.

But nothing to do at the level of ngb-panel selector, the css class still the same.

I don’t know if it’s possible to do something like that.

You can fork a plunker from one of our demos and use it as a starting point. Please note that we can not act on bug reports without a minimal reproduction scenario in plunker. Here is why: http://plnkr.co/edit/agr9Oe3RN01sn9UeWJ3m?p=preview

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 5.2.5

ng-bootstrap: 1.0.4

[IT-CASADO]

I also want to use ngClass or ngStyle for the same reason. Add additional styles on opened tabs…

[Numalama]

Here is an example of the result I want to optain but with Angular Material: https://stackblitz.com/edit/angular-material2-issue-2262?file=app/app.component.ts

When I click on an item, I change the preselected id list and so the css class became active.

But with ngb how can we make something like that ?