Collapse component allows you to toggle content on your pages with a bit of JavaScript and some classes. Flexible component that utilizes a handful of classes (from the required transitions component(not yet implemented)) for easy toggle behavior.
The easiest way to add the collapse component to your app (will be added to the root module)
Basic
<button type="button" class="btn btn-primary" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">Toggle collapse
</button>
<hr>
<div id="collapseBasic" [collapse]="isCollapsed">
<div class="well well-lg card card-block card-header">Some content</div>
</div>
import { Component } from '@angular/core';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'collapse-demo',
templateUrl: './basic.html',
standalone: false
})
export class CollapseDemoComponent {
isCollapsed = false;
}
With animation
You can enable animation via isAnimated input option
<button type="button" class="btn btn-primary" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic">Toggle collapse
</button>
<hr>
<div id="collapseBasic" [collapse]="isCollapsed" [isAnimated]="true">
<div class="well well-lg card card-block card-header">Some content</div>
</div>
import { Component } from '@angular/core';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'collapse-demo-animation',
templateUrl: './animated.html',
standalone: false
})
export class CollapseDemoAnimatedComponent {
isCollapsed = false;
}
Events
Collapse directive exposes 4 events: collapses, that fires when a collapse was triggered (animation start),
collapsed, that fires when a content was hidden (animation finished),
expands, that fires when a expansion was triggered (animation start)
and expanded, that fires when a content was shown
Event: expanded
<div class="row">
<div class="col-md-3">
<button type="button" class="btn btn-primary" (click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed" aria-controls="collapseEvent">Toggle collapse
</button>
</div>
<div class="col-md-9">
<pre class="card card-block card-header">Event: {{message}}</pre>
</div>
</div>
<hr>
<div id="collapseEvent"
[isAnimated]="true"
[collapse]="isCollapsed"
(collapses)="collapses()"
(expands)="expands()"
(collapsed)="collapsed()"
(expanded)="expanded()">
<div class="well well-lg card card-block card-header">Some content</div>
</div>
import { Component } from '@angular/core';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'collapse-demo-events',
templateUrl: './events.html',
standalone: false
})
export class CollapseDemoEventsComponent {
isCollapsed = false;
message = 'expanded';
collapsed(): void {
this.message = 'collapsed';
}
collapses(): void {
this.message = 'collapses';
}
expanded(): void {
this.message = 'expanded';
}
expands(): void {
this.message = 'expands';
}
}
Manual toggle
<button type="button" class="btn btn-primary" (click)="collapse.show()"
aria-controls="collapseManual">Show content
</button>
<button type="button" class="btn btn-primary" (click)="collapse.hide()"
aria-controls="collapseManual">Hide content
</button>
<hr>
<div id="collapseManual" #collapse="bs-collapse" [collapse]="isOpen">
<div class="well well-lg card card-block card-header">Some content</div>
</div>
import { Component } from '@angular/core';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'toggle-manual-demo',
templateUrl: './toggle-manual.html',
standalone: false
})
export class ToggleManualDemoComponent {
isOpen = false;
}
Inline display
<button type="button" class="btn btn-success" (click)="collapse.display='inline-block'"
aria-controls="collapseBasic">Inline-block
</button>
<button type="button" class="btn btn-primary" (click)="collapse.display='none'"
aria-controls="collapseBasic">None
</button>
<hr>
<div id="collapseBasic" [collapse]="!isCollapsed" #collapse="bs-collapse">
<div class="well well-lg card card-block card-header">Some content</div>
</div>
import { Component } from '@angular/core';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'inline-display-demo',
templateUrl: './inline-display.html',
standalone: false
})
export class InlineDisplayDemoComponent {
isCollapsed = false;
}
Accessibility
Be sure to add aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of aria-expanded="false". If you’ve set the collapsible element to be open by default using the show class, set aria-expanded="true" on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed. If the control element’s HTML element is not a button (e.g., an <a> or <div>), the attribute role="button" should be added to the element.
If your control element is targeting a single collapsible element – i.e. the data-target attribute is pointing to an id selector – you should add the aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
Installation
ng add ngx-bootstrap --component collapse
### Standalone component usage
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CollapseDirective } from 'ngx-bootstrap/collapse';
@Component({
imports: [
BrowserAnimationsModule,
CollapseDirective,
...
]
})
export class AppComponent(){}
### Module usage
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CollapseModule } from 'ngx-bootstrap/collapse';
@NgModule({
imports: [
BrowserAnimationsModule,
CollapseModule,
...
]
})
export class AppModule(){}
Also should be added web-animations-js polyfill for IE browser (Edge)
Basic
With animation
Events
Event: expanded