ngx-collapse

Bootstrap-like collapse for Angular

Usage no npm install needed!

<script type="module">
  import ngxCollapse from 'https://cdn.skypack.dev/ngx-collapse';
</script>

README

NgxCollapse

Bootstrap-like collapse for Angular

Should I use this ?

I'm using bootsrap.css for styles, without bootstrap.js and jQuery dependencies.

or

I'm not using bootsrap, And I want bootstrap-like collapse.

Installation

Assuming bootsrap.css is already added to the project.

  • Simply run npm i ngx-collapse.
  • Add NgxCollapseModule to your NgModule with import { NgxCollapseModule } from 'ngx-collapse'.
  import { NgxCollapseModule } from 'ngx-collapse';

  @NgModule({
    imports:      [ 
      ...,
       NgxCollapseModule ],
    ...
  })
  export class AppModule { }

Not using bootstap?

  • Add the following in styles.scss
.collapse:not(.show) {
  display: none;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

Implimentation

  • Provides two directives collapse and collapseContent.

  • Assign collapseContent directive to local template reference variable, something like this #content1="collapseContent, here content1 is variable

  • Assign the local variable to collapse directive.

  • Option 1: Control one item

  <div [collapse]="content1" > <button > toggle</button> </div>

  <div collapseContent  #content1="collapseContent" >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde fuga iure eum obcaecati. Illum placeat eum animi culpa, numquam architecto in nam exercitationem praesentium, magni ratione voluptatibus nobis. Dolores, unde.
  </div>
  • Option 2: Pass an array of multiple contents
  <div [collapse]="[content1, content2]" > <button > toggle</button> </div>

  <div collapseContent  #content1="collapseContent" >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde fuga iure eum obcaecati. Illum placeat eum animi culpa, numquam architecto in nam exercitationem praesentium, magni ratione voluptatibus nobis. Dolores, unde.
  </div>

  <div collapseContent  #content2="collapseContent" >
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde fuga iure eum obcaecati. Illum placeat eum animi culpa, numquam architecto in nam exercitationem praesentium, magni ratione voluptatibus nobis. Dolores, unde.
  </div>

Demo

https://stackblitz.com/edit/ngx-collapse-example