ngx-height-toggle v1.1.0

ngx-height-toggle - Angular(2+) directive to change the height of html elements to their content's height on toggle and on content change.

Table of Contents

• Demo
• Dependencies
• Installation
• Usage
• Directive inputs

Demo

Check out the demo at https://stackblitz.com/edit/ngx-height-toggle-demo

Dependencies

• @angular/common: ^5.1.0
• @angular/core: ^5.1.0
• rxjs: ^6.3.3

Installation

Install ngx-height-toggle via npm:

npm install --save ngx-height-toggle

or with yarn:

yarn add ngx-height-toggle

Once installed you need to import NgxHeightToggleModule in your module where you'd like to use the directive:

import { NgxHeightToggleModule } from 'ngx-height-toggle';

@NgModule({
  declarations: [MyComponent, ...],
  imports: [NgxHeightToggleModule, ...],
})
export class MyModule { }

Usage

Default Height change

You have to add the directive ngxHeightToggle to the element you want to toggle, and pass a variable telling it whether it should be expanded or collapsed.

<div class="collapsible" ngxHeightToggle [open]="open">
    <p>some text</p>
</div>

When you want to toggle the height, change the variable.

export class MyComponent {

    public open = false;

    public toggle(): void {
        this.open = !this.open;
    }

}

The directive will automatically adjust the height when the content height changes.

Collapsible in another collapsible

In case you want to include a collapsible inside another collapsible, you need to disable change detection for the wrapper collapsible directive.

Directive inputs