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.
If you want to Add Custom heading with HTML we need to add “accordion-heading” directive in the “accordion-group”.below is the example how to overwrite Tile in HTML for the accordion.
Spread the love
20