Skip to main content

angular bootstrap - Disable collapse close Accordion panel

app.component.ts 

import { Component } from '@angular/core';
import { NgbPanelChangeEvent } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  public beforeChange($event: NgbPanelChangeEvent) {
    if ($event.panelId === 'second-panel'
          && $event.nextState === false) {
      $event.preventDefault();
    }
  }
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - Disable collapse close Accordion panel
</h4>


<ngb-accordion #acc="ngbAccordion" (panelChange)="beforeChange($event)">

  <ngb-panel title="First Panel" id="first-panel">
    <ng-template ngbPanelContent>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      In egestas felis eget nisi porttitor, et faucibus est interdum.
    </ng-template>
  </ngb-panel>

  <ngb-panel title="Second Panel [Disable Collapse]" id="second-panel">
    <ng-template ngbPanelContent>
      Vivamus nec enim vel metus sodales hendrerit.
      Curabitur imperdiet condimentum eleifend.
      Integer diam tortor, dapibus eget nisi vel, vestibulum varius quam.
    </ng-template>
  </ngb-panel>

  <ngb-panel title="Third Panel" id="third-panel">
    <ng-template ngbPanelContent>
      Proin ultrices urna fermentum quam porttitor interdum.
      Phasellus id erat elit. Morbi et bibendum est.
      Mauris nec fermentum eros, id facilisis orci.
      Donec luctus consectetur tortor sed malesuada.
    </ng-template>
  </ngb-panel>

</ngb-accordion>
More Angular tutorials
Labels: