This packages has been deprecated!
ngx-height-toggle - Angular(2+) directive to change the height of html elements to their content's height on toggle and on content change.
Check out the demo at https://stackblitz.com/edit/ngx-height-toggle-demo
- @angular/common: ^5.1.0
- @angular/core: ^5.1.0
- rxjs: ^6.3.3
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 { }
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.
In case you want to include a collapsible inside another collapsible, you need to disable change detection for the wrapper collapsible directive.
Input name | Type | Default value | Note |
---|---|---|---|
open | boolean | required | Depending on the value the directive will close or open. |
closedHeight | number | 0 | Specifies the height of closed state in pixels. |
transitionDuration | number | 500 | Standard css property for translation-duration. Specify in ms. |
transitionProperty | string | 'height' | Standard css property for transition-property. Other than 'height', only option that makes sense is using 'all', if needed. |
transitionTimingFunction | string | 'linear' | Standard css property for transition-timing-function. |
transitionDelay | number | 0 | Standard css property for transition-delay. Specify in ms. |
enableChangeDetection | boolean | true | Use this input to turn off change detection. Unless disabled the directive will check the content height in every AfterViewChecked lifecycle hook and change the directive's height to the height of its content. |