Skip to main content

angular bootstrap - Accordion panel custom header

app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - Accordion panel custom header
</h4>


<ngb-accordion #acc="ngbAccordion">

  <ngb-panel id="first-panel">
    <ng-template ngbPanelHeader let-opened="opened">
      <div 
        class="accordion-button custom-header justify-content-between"
        [class.collapsed]="!opened">
          <p class="m-0">First panel</p>
          <button 
            ngbPanelToggle class="btn btn-link p-0 px-2">
              {{ opened ? 'Collapse' : 'Open' }}
          </button>
      </div>
    </ng-template>

    <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" 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: