angular-collapsible


Angular collapsible component styled with Materialize CSS.

Demo

Compatibility chart

| angular-collapsible | Angular | Node.js |
|------------------------|----------------|----------|
| <=0.0.53 | >=2.x.x <5.x.x | 8.9.x |
| 0.6.x | >=6.x.x <8.x.x | >=8.9.x |
| ? | >=8.x.x | >=10.9.x |

Dependencies

* @angular/animations
``bash
$ npm install @angular/animations --save
`
* materialize-css
`bash
$ npm install materialize-css --save
`
open src/styles.css and add this line:
`bash
@import '~materialize-css/dist/css/materialize.min.css';
`

Consuming the library

You can import the library in any Angular application by running:

`bash
$ npm install angular2-collapsible
`

and then from your Angular AppModule:

`typescript
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // <-- import required BrowserAnimationsModule
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { CollapsibleModule } from 'angular2-collapsible'; // <-- import the module

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule, // <-- include required BrowserAnimationsModule
CollapsibleModule // <-- include angular2-collapsible module
],
bootstrap: [AppComponent]
})
export class AppModule { }
`

Once the library is imported, you can use its components and services in your Angular application:

`xml

{{title}}

Item #1

Item #1 Body

Item #2

Item #2 Body

`

OR for a table with collapsible row details

`xml

{{title}}

Col #1
Col #2
Col #3





Cell(0,0)
Cell(0,1)
Cell(0,2)

Row #1 Detail #1

Row #1 Detail #2

Cell(1,0)
Cell(1,1)
Cell(1,2)

Row #2 Detail

``

Options

| Option | Type | Default value | Description |
| ------------------------ | ----------------------------------- | --------------- | ------------------------------------------------------------- |
| type | { 'accordion' | 'expandable' } | 'accordion' | The type of the collapsible list: 'accordion' or 'expandable' |

$3

$3

| Option | Type | Default value | Description |
| --------------------------- | ------- | -------------------------- | ---------------------------------------------------------------- |
| bordered | boolean | false | Makes the table bordered |
| borderedHorizontally | boolean | false | Makes the table bordered horizontally only |
| borderedVertically | boolean | false | Makes the table bordered vertically only |
| striped | boolean | false | Makes the table striped |
| stripedOddColor | string | 'rgba(242,242,242,0.8)' | A color of an odd striped row |
| stripedOddTextColor | string | 'black' | A text color of an odd striped row |
| stripedEvenColor | string | 'transparent' | A color of an even striped row |
| stripedEvenTextColor | string | 'black' | A text color of an even striped row |
| highlight | boolean | false | Highlight table rows on mouse hover |
| highlightColor | string | 'rgba(222,222,222, 0.8)' | A color of a highlighted row |
| highlightTextColor | string | 'black' | A text color of a highlighted row |
| activeColor | string | 'rgba(212,212,212, 0.8)' | A color of an active row |
| activeTextColor | string | 'black' | A text color of an active row |
| centered | boolean | false | Center align all the text in the table |
| [ ] TODO: responsive | boolean | false | Makes the table horizontally scrollable on smaller screen widths |
| select | boolean | false | Allows to select rows |
| selectMultipleRows | boolean | false | Allows to multiple rows |
| selectColor | string | 'rgba(212,212,212, 0.8)' | Allows to multiple rows |
| selectTextColor | string | 'black' | A text color of a selected row |
| allowDeselectingRows | boolean | false | Allows deselecting selected rows |
| allowKeyboardNavigation | boolean | true | Allows navigation between table rows using arrow keys |
| noTextSelect | boolean | false | Disables user select withing the table |

License

MIT © Dmitrii Serikov