Ngb-accordion expand when click on row

user_5166764 0
Viewed 4779

I am trying to find solution, for ng-accordion from ng-bootstrap.

Accordin - there is any possibility to click in any place in row and expand/collapse it? No only in label...

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <ngb-panel title="Simple" >
    <ng-template ngbPanelContent>
        Test text
    </ng-template>
  </ngb-panel>
</ngb-accordion>
ng-bootstrap bootstrap-4 angular
3 Answers

It should be easy with custom css like:

component.css

ngb-accordion ::ng-deep .card-header {
    padding: 0;
}

ngb-accordion ::ng-deep .card-header button {
  width: 100%;
  padding: 1.125rem 2rem;
  text-decoration: none;
  text-align: left;

}
ngb-accordion ::ng-deep .card-header button:focus {
  box-shadow: none;
}

Stackblitz Example

user_54851670

why not use a template header and use (click)="acc.toogle('ngb-panel-0')" ?

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <!--give "id" to the pannel-->
  <ngb-panel id="ngb-panel-0">
    <!--use a ng-template ngbPanelHeader-->
    <ng-template ngbPanelHeader let-opened="opened">
      <!--it's only a div with a (click)--->
      <!-- acc is the template Reference variable of the accordion-->
      <!-- ngb-panel-0 is the "id" of the pannel-->
      <div (click)="acc.toggle('ngb-panel-0')" >
        Simple
      </div>
    </ng-template>
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry 
       richardson ad squid. 3 wolf moon officia

    </ng-template>
  </ngb-panel>
user_85581860

This is not the direct answer but i think its a better solution

<div class="card">
 <div class="card-header" data-toggle="collapse" (click)="showBody=!showBody">
  The title
 </div>
  <div class="card-body" *ngIf="showBody">
   Test text
  </div>
</div>

Why? Its does not need any 3party. Its highly flexible. And it leaves a markup containing pure html. Only angular attributes are used. in this variant you can add html in the header. ex buttons,images. just add next card directly below. any hover effects can easely be styled using an extra class:

<div class="card my-accordian">
user_33020040
Related