The <accordion>
element requires the inclusion of NG-2 Bootstrap - an external resource used to create Bootstrap-like elements in Angular 2 applications. NG-2 Bootstrap was renamed to NGX-Bootstrap. Please refer to this documentation when customizing this component.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AccordionModule } from 'ng2-bootstrap';
import { AppComponent } from './component';
@NgModule({
imports: [BrowserModule, AccordionModule.forRoot()],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './component.html'
})
export class AppComponent {}
<accordion class="accordion">
<accordion-group>
<div accordion-heading>
Static Header, initially expanded
<i class="pull-right float-xs-right">
<svg class="icon icon-1" viewBox="0 0 256 256">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svgs/icons.svg#chevron-down"></use>
</svg>
</i>
</div>
This content is straight in the template.
</accordion-group>
<accordion-group>
<div accordion-heading>
I can have markup, too!
<i class="pull-right float-xs-right">
<svg class="icon icon-1" viewBox="0 0 256 256">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svgs/icons.svg#chevron-down"></use>
</svg>
</i>
</div>
This is just some content to illustrate fancy headings.
</accordion-group>
<accordion-group>
<div accordion-heading>
Content 1
<i class="pull-right float-xs-right">
<svg class="icon icon-1" viewBox="0 0 256 256">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svgs/icons.svg#chevron-down"></use>
</svg>
</i>
</div>
<p>Content 1</p>
</accordion-group>
<accordion-group>
<div accordion-heading>
Content 2
<i class="pull-right float-xs-right">
<svg class="icon icon-1" viewBox="0 0 256 256">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svgs/icons.svg#chevron-down"></use>
</svg>
</i>
</div>
<p>Content 2</p>
</accordion-group>
</accordion>
Content 1
Content 2