Package Exports

ngx-collapse

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-collapse) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

NgxCollapse

Bootstrap-like collapse for Angular

Should I use this ?

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

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