https://github.com/elelad/angular-collapsible

Simple Angular component for collapse. No dependencies, no need for Bootstrap or jQuery.
https://github.com/elelad/angular-collapsible

Last synced: 15 days ago
JSON representation

Simple Angular component for collapse. No dependencies, no need for Bootstrap or jQuery.

• Host: GitHub
• URL: https://github.com/elelad/angular-collapsible
• Owner: elelad
• Created: 2019-11-16T19:11:06.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T11:49:51.000Z (almost 2 years ago)
• Last Synced: 2024-11-19T01:08:41.855Z (about 1 month ago)
• Language: TypeScript
• Homepage: https://elelad.github.io/angular-collapsible/
• Size: 876 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 28
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Ng-Collapsible

A simple Angular component (as directive) for collapse. No dependencies, no need for Bootstrap or jQuery.

See working example: [here](https://elelad.github.io/angular-collapsible/).

## 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:

    ```html

    


        
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:

```html



    
Start Open Collapsible:

    
{{item}}



```

### ngCollapseOptions

Pass an object of type `NgCollapsibleOptions` to `[ngCollapseOptions]` in order to customize some behavior:

```typescript

interface NgCollapsibleOptions {

    showArrow?: boolean;

    arrowSide?: NgCollapsibleArrowSide;

    accessibility?: boolean;

    iconSet?: NgCollapsibleIconSet;

    accordion?: boolean;

}

```

#### 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:

```typescript

export enum NgCollapsibleArrowSide {

    start = 'start',

    end = 'end'

}

export enum NgCollapsibleIconSet {

    ionic = 'ionic',

    md = 'md',

    plusMinus = 'plus-minus'

}

```

## 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: 

```css

.ngCollapseHeaderBox, .ngCollapseHeader, .ngCollapseIcon, .ngCollapseItems

```

To change the style of the icon change `.ngCollapseIcon svg` style.

## Compatibility

Tested with Angular 8 and Ionic 3 with Angular 5.

## License 

MIT