A content area which can be collapsed and expanded, with some changes from the original ng-zorro collapse animation.

When To Use

• This package has dependency over ng-zorro-antd module. Install ng-zorro-antd package first in-order to use this package.
• Can be used to group or hide complex regions to keep the page clean.
• Accordion is a special kind of Collapse, which allows only one panel to be expanded at a time.

Installation

We recommend using @angular/cli to install. It not only makes development easier, but also allows you to take advantage of the rich ecosystem of angular packages and tooling.

$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add ng-zorro-antd

• npm install nz-custom-collapse. Append @latest tag inorder to get latest package version.

Usage

Import the module into every module where you want to use the components.

import { NzCustomCollapseModule } from 'nz-custom-collapse';

@NgModule({
  imports: [ NzCustomCollapseModule ]
})

nz-custom-collapse

| Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | [nzAccordion] | Accordion mode | boolean | false| | [nzBordered] | Set border style | boolean | true |

nz-custom-collapse-panel

| Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | [nzDisabled] | If true, panel cannot be opened or closed | boolean | false | | [nzHeader] | Title of the panel | string｜TemplateRef<void> | - | | [nzExpandedIcon] | Customize an icon for toggle | string｜TemplateRef<void> | - | | [nzExtra] | Extra element in the corner | string｜TemplateRef<void> | - | | [nzShowArrow] | Display arrow or not | boolean | true | | [nzActive] | Active status of panel, double binding | boolean | - | | (nzActiveChange) | Callback function of the active status | EventEmitter<boolean> | - |