In Angular using bootstrap open Accordion

In my last article we discuss on how to setup bootstrap in our application and open modal in boot strap. In these article i discuss on how to use accordion in our application.
We need to add below line in our app.module.ts file.

...........
import { AccordionModule } from 'ngx-bootstrap';
..........
@NgModule({

  imports: [
             AccordionModule.forRoot(),
             ...
           ]
})

After adding above code in app.module.ts file. Now we can use accordion in our component.
Static Component Code – Create one component called “static-accordion.ts” adding below code.

import { Component } from '@angular/core';
 
@Component({
  selector: 'static-accordion',
  templateUrl: './static.html'
})
export class StaticAccordionComponent {}

After adding above code we need to add “static.html” in below code for display accordion.

<accordion>
<accordion-group heading="First Static Accordion Group">
<p>static content for the first accordion.</p>
</accordion-group>
<accordion-group heading="Second group">
<p>Static content for the Second accordion.</p>
</accordion-group>
</accordion>

If you want to trigger event when click on the accordion for that we need
“isOpenChange” event listener.

<accordion>
<accordion-group heading="First Static Accordion Group" (isOpenChange)="eventfire($event)">
<p>static content for the first accordion.</p>
</accordion-group>
</accordion>

import { Component } from '@angular/core';
 
@Component({
  selector: 'static-accordion',
  templateUrl: './static.html'
})
export class StaticAccordionComponent {
eventfire(event: boolean) {
    console.log("event fire Accordion Value:"+event);
//It display where accordion open or close.
  }
}

<accordion>
<accordion-group><div accordion-heading><h2>This is Sample heading</h2></div>
<p>static content for the first accordion.</p>
</accordion-group>
</accordion>

import { Component } from '@angular/core';
@Component({
  selector: 'static-accordion',
  templateUrl: './static.html'
})
export class StaticAccordionComponent {}
}