Ngx-Bootstrap - accordion

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

AccordionComponent

Displays collapsible content panels for presenting information in a pmited 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 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 group s header template.

selector

accordion-group, accordion-panel

Inputs

heading − string, Cpckable 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 abipty 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 accordion, We ve updated app.module.ts to use AccordionModule as in 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 server is up and running. Open http://localhost:4200 and verify the following output.