Blog

In this guide, we will discuss Ngx-Bootstrap – accordion.

Accordion is a control to display collapsible panels and it is used to display information in limited space.

AccordionComponent

Displays collapsible content panels for presenting information 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

Instead of using a heading attribute on the accordion group, you can use an accordion-heading attribute on any element inside of a group that will be used as the group’s header template.

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, Whether the other panels should be closed when a panel is opened. Default: false
• isAnimated − boolean, turn on/off animation

Example

As we’re going to use an accordion, We’ve updated app.module.ts to use AccordionModule as in the ngx-bootstrap Environment Setup chapter.

Update test.component.html to use the accordion.

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

Once the server is up and running. Open http://localhost:4200 and verify the following output.

Next Topic; Click Here