Ngx Bootstrap accordion

Ngx Bootstrap accordion

The Accordion is a control for the display of collapsible panels and is used to display limited space information.

AccordionComponent

Show collapsible panels of content to display details in a limited amount of space.

selector

• accordion

Inputs

• closeOthers −boolean, if true expanding one item will close all others
• isAnimated −boolean, turn on/off animation, default: false

AccordionPanelComponent

AccordionHeading

You may use an accordion-heading attribute on any element within a group that will be used as the header template of the group instead of using the heading attribute on an accordion-heading attribute.

selector

• accordion-group, accordion-panel

Inputs

• heading − string, Clickable text in accordion's group header
• isDisabled −boolean, enables/disables accordion group
• isOpen −boolean, Is accordion group open or closed. This property supports two-way binding
• panelClass −string, Provides an ability to use Bootstrap's contextual panel classes (panel-primary, panel-success, panel-info, etc...).

Outputs

• isOpenChange −Emits when the opened state changes

AccordionConfig

Configuration service, provides default values for the AccordionComponent.

Properties

• CloseOthers-boolean, if when a panel is opened, the other panels should be closed. Default setting: false
• isAnimated-Boolean, turn on/off animation.

Example

As we are going to use accordion, as in the ngx-bootstrap Environment Setup chapter, we have updated app.module.ts to use AccordionModule.

In order to use the accordion, update test.component.html.

test.component.html

<accordion>
   <accordion-group heading="Open By Default" [isOpen]="open">
      <p>Open By Default</p>
   </accordion-group>
   <accordion-group heading="Disabled" [isDisabled]="disabled">
      <p>Disabled</p>
   </accordion-group>
   <accordion-group heading="with isOpenChange" (isOpenChange)="log($event)">
      <p>Open Event</p>
   </accordion-group>
</accordion>

Update test.component.ts for corresponding variables and methods.

test.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
   open: boolean = true;
   disabled: boolean = true;
   constructor() { }
   ngOnInit(): void {
   }
   log(isOpened: boolean){
      console.log(isOpened);
   }
}

Build and Serve

Run the following command to start the angular server.

ng serve