Ng-Collapsible
A simple Angular component (as directive) for collapse. No dependencies, no need for Bootstrap or jQuery. See working example: here.
How to Use
- Install:
npm i ng-collapsible --save
- Import to your @NgModule or any other module file :
import { NgCollapsibleModule } from 'ng-collapsible';
- Add to the module import sections:
imports: [ BrowserModule, NgCollapsibleModule]
- Add the attribute ngCollapsible to your element:Simple Collapsible:{{item}}
Note: ngCollapsible will use the first element as a clickable header and the other as the collapsible items.
Component Inputs
isOpen
Use [isOpen]
to programmatically close or open the collapse items:
Start Open Collapsible: {{item}}
ngCollapseOptions
Pass an object of type NgCollapsibleOptions
to [ngCollapseOptions]
in order to customize some behavior:
Options
- showArrow: boolean - choose if to add an icon to the header. default
true
- arrowSide: NgCollapsibleArrowSide - choose the side of the icon. default
start
- accessibility: boolean - choose to add an accessibility attributes to the clickable header and the collapse items. default
true
- iconSet: NgCollapsibleIconSet - choose an icon set. default
ionic
- accordion: boolean - declare the element as a part of accordion, to close it when other accordion element will open. default
false
Helpers
You have few interfaces and enums to help you fill NgCollapsibleOptions
, all importable:
Style
For compatibility the encapsulation of the component sets to ViewEncapsulation.None
This way you can apply any style to any element even from your global css file. The component uses few css classes, you can override them and set your own style:
To change the style of the icon change .ngCollapseIcon svg
style.
Compatibility
Tested with Angular 8 and Ionic 3 with Angular 5.
License
MIT