A powerful Angular library that provides Bootstrap-styled collapse functionality with smooth animations and flexible control options.
npm install @pmeig/ngb-collapseA powerful Angular library that provides Bootstrap-styled collapse functionality with smooth animations and flexible control options.
bash
npm install @pmeig/ngb-collapse
`
Features
- 🎯 CollapseMaterial Directive - Smart collapse directive with animation support
- 📦 Flexible Control - Toggle via boolean values or element references
- 🔄 Animation Options - Vertical and horizontal collapse animations
- ✨ Bootstrap Integration - Full Bootstrap 5.3.3 collapse behavior
- 🎨 Bootstrap 5.3.3 compatible styling
- 🚀 Angular 20.2.1 support with signals
- 📱 Responsive design
- ♿ Accessibility friendly with ARIA attributes
- 🛠️ Programmatic and template-driven control
Usage
$3
`typescript
import { CollapseMaterial } from '@pmeig/ngb-collapse';
@Component({
imports: [CollapseMaterial],
// ...
})
export class MyComponent { }
` $3
`html
This content will collapse and expand with smooth animations.
`
$3
`html
This content is controlled by a boolean variable.
`
$3
`html
This content collapses horizontally instead of vertically.
`
API Reference
$3
| Property | Type | Default | Description |
|----------|------|---------|-------------|
|
collapse | boolean \| Element | false | Controls collapse state - boolean for programmatic control, Element reference for click-based control |
| collapseAnimation | 'vertical' \| 'horizontal' | 'vertical' | Animation direction for the collapse effect |#### Control Methods
- Boolean Control: Pass
true/false to programmatically show/hide content
- Element Reference: Pass button/trigger element reference for automatic click handling
- Template Reference: Use template reference variables for easy element bindingHow It Works
$3
The collapse directive automatically:
1. Manages CSS Classes: Applies Bootstrap collapse classes (collapse, collapsing, show)
2. Handles Animations: Smooth transitions between collapsed and expanded states
3. Calculates Dimensions: Dynamically measures content size for proper animations
4. ARIA Support: Automatically manages aria-expanded and aria-controls attributes$3
- Collapsed State: Content is hidden with display: none equivalent
- Collapsing State: Transition animation is active with collapsing class
- Expanded State: Content is fully visible with collapse show classesBootstrap Classes Support
This library generates and works with standard Bootstrap 5 collapse classes:
-
collapse - Base collapse styling
- collapsing - Applied during transition animations
- show - Indicates expanded state
- collapse-horizontal - Applied for horizontal collapse animations
- collapsed - Applied to trigger elements when content is collapsedIntegration with Other Modules
The collapse module works seamlessly with:
`typescript
// Often used together
import { AccordionMaterial } from '@pmeig/ngb-accordion';
import { OffcanvasMaterial } from '@pmeig/ngb-offcanvas';
`
Dependencies
- Angular: >=20.2.1
- @angular/common: >=20.2.1
- @pmeig/ngb-core: ^0.0.1
- tslib: ^2.3.0
Compatibility
- Angular: 20.2.1+
- Bootstrap: 5.3.3+
- TypeScript: 5.8.3+
- Modern browsers (Chrome, Firefox, Safari, Edge)
Best Practices
$3
`html
type="button"
aria-label="Toggle navigation menu"
#menuToggle>
Menu
``Animation not working
- Check that the element has measurable content for size calculations
ARIA attributes not updating
- Verify that trigger elements are properly referenced
- Check that the directive is applied to the collapsible content, not the trigger
Horizontal collapse not working
- Set explicit width on content for proper measurements