Cascader

API#

<nz-cascader [nzOptions]="options" [(ngModel)]="values"></nz-cascader>

nz-cascadercomponent#

Interfaces#

NzCascaderOption#

export interface NzCascaderOption {
  value?: any;
  label?: string;
  title?: string;
  disabled?: boolean;
  loading?: boolean;
  isLeaf?: boolean;
  children?: NzCascaderOption[];
  disableCheckbox?: boolean;

  [key: string]: any;
}

NzShowSearchOptions#

When nzShowSearch is an object it should implement NzShowSearchOptions:

The default filter looks as follows:

const defaultFilter: NzCascaderFilter = (i, p) => {
  return p.some(o => {
    const label = o.label;
    return !!label && label.indexOf(i) !== -1;
  });
};

For example, if you would like to ignore lower or upper case, you could use a filter function like this:

const filter: NzCascaderFilter = (i, p) => {
  return p.some(o => {
    const label = o.label;
    return !!label && label.toLowerCase().indexOf(i.toLowerCase()) !== -1;
  });
};

Methods#

FAQ#

Q: An error is thrown when nzLoadData is used.#

When you pass a function to nzLoadData, the function becomes a NzCascaderComponent property. When the component calls the nzLoadData function, this is bound to nothing. You have to pass an arrow function or use Function.bind to bind this to the parent component. see example.