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

  $ npm install @angular/animations --save

• materialize-css

  $ npm install materialize-css --save

  open src/styles.css and add this line:

  @import '~materialize-css/dist/css/materialize.min.css';

Consuming the library

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

$ npm install angular2-collapsible

and then from your Angular AppModule:

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:

<h1>{{title}}</h1>

<collapsible-list [type]="'accordion'">
  
  <collapsible-list-item>
    <collapsible-header class="waves-effect">
      Item #1
    </collapsible-header>
    <collapsible-body [expanded]="false">
      <p>Item #1 Body</p>
    </collapsible-body>
  </collapsible-list-item>

  <collapsible-list-item>
    <collapsible-header class="waves-effect">
      Item #2
    </collapsible-header>
    <collapsible-body [expanded]="true">
      <p>Item #2 Body</p>
    </collapsible-body>
  </collapsible-list-item>

</collapsible-list>

OR for a table with collapsible row details

<h1>{{title}}</h1>

<collapsible-table [type]="'accordion'" bordered>

  <thead>
    <collapsible-table-row>
      <th>Col #1</th>
      <th>Col #2</th>
      <th>Col #3</th>
    </collapsible-table-row>
  </thead>

  <tbody>
    <collapsible-table-row [detail]="detail1">
      <td>Cell(0,0)</td>
      <td>Cell(0,1)</td>
      <td>Cell(0,2)</td>
    </collapsible-table-row>
    <collapsible-table-row-detail #detail1>
      <table>
        <tr>
          <td width="75%">Row #1 Detail #1</td>
          <td>Row #1 Detail #2</td>
        </tr>
      </table>
    </collapsible-table-row-detail>

    <collapsible-table-row [detail]="detail2">
      <td>Cell(1,0)</td>
      <td>Cell(1,1)</td>
      <td>Cell(1,2)</td>
    </collapsible-table-row>
    <collapsible-table-row-detail #detail2>
      <p>Row #2 Detail</p>
    </collapsible-table-row-detail>

  </tbody>

</collapsible-table>

Options

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

Collapsible list options

Collapsible table options

| 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