”;
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 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, 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 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.
”;