ng-zorro-antd
Advanced tools
Changelog
19.0.1 (2025-01-03)
nzFormat
(#8744) (1b7ab5a)zh_TW
(#8950) (9607e11)NG0600
error (#8955) (8d6135e)nzBorderless
input (#8741) (22ce17c)vi_VN
(#8894) (f08ad1c)nzTreeNodePadding
not works in virtual scroll (#8920) (82b660a)ngClass
and ngStyle
(#8895) (c3ab3ba)FADE_CLASS_NAME_MAP
and IMAGE_PREVIEW_MASK_CLASS_NAME
(#8912) (65223d9)CheckBox
to Checkbox
(#8934) (c76433d5)nzPlacement
(#8935) (6fbd22c)nz-checkbox-group
component (#8932) (489e0de)nzVariant
option (#8827) (2c63c87)nz-icon
tag selector (#8778) (1406241)nzTriggerSubMenuAction
to support click trigger for submenu (#8461) (860df87)nzStatusRender
to support customize state rendering (#8714) (6f36d75)nzSortDirections
to global config (#6613) (#8721) (eb1fdc5)nzOneWay
to support one way style (#8717) (99fd4de)All
nzClass
/ nzStyle
input properties no longer support the following features:
Set()
: use arrays instead@WithConfig
to standard decorator. If you're using @WithConfig
in your library, please turn experimentalDecorators
off in tsconfig.json
[nz-icon]
to nz-icon
tag. If you're using [nz-icon]
selector in stylesheet to select icon inside zorro component, please use nz-icon
insteadinput-number: Redesign the input-number so that it will be much simpler and more flexible.
Now you can use affixes or addons as follows, no need for ng-template
and nz-input-number-group
:
<!-- Custom handler icons -->
<nz-input-number>
<nz-icon nzInputNumberUpIcon />
<nz-icon nzInputNumberDownIcon />
</nz-input-number>
<!-- With affixes -->
<nz-input-number>
<span nzInputPrefix>Prefix</span>
<span nzInputSuffix>Suffix</span>
</nz-input-number>
<!-- With addons -->
<nz-input-number>
<span nzInputAddonBefore>Before</span>
<span nzInputAddonAfter>After</span>
</nz-input-number>
The old input-number component is marked as deprecated, and its entrypoint had changed to ng-zorro-antd/input-number-legacy
.
NzInputNumberComponent
is now NzInputNumberLegacyComponent
, and NzInputNumberModule
is now NzInputNumberLegacyModule
.
Don't worry, ng update ng-zorro-antd
will automatically do the migration.
cascader: Cancel support for writing value with NzCascaderOption[]
type.
In the past, the cascader component kept a trick that if you wrote value with NzCascaderOption[]
type, it extracted value by mapping each item to its value property, for example:
@Component({
template: `<nz-cascader [nzOptions]="options" [ngModel]="value"></nz-cascader>`
})
export class ExampleComponent {
value = [{ label: 'NG ZORRO', value: 'ng-zorro-antd' }]
}
then the value of cascader would be 'ng-zorro-antd'
.
It's strange that the input and output values don't match when we haven't changed the values, and it's hard to maintain. We expect that the value passed in should be the value in the list of options.
In v19, this trick is removed and if you're already using this trick in your code, please consider the add a map
function to pass the actual value.
checkbox Redesign the checkbox group component.
NzCheckBoxOptionInterface['checked]
field. By the way, NzCheckBoxOptionInterface
is marked as deprecated, use NzCheckboxOption
insteadnz-checkbox-group
: Type of ngModel
is changed from NzCheckBoxOptionInterface[]
to NzCheckboxOption['value'][]
card: Remove redundant nzBorderless
input property. Use nzBordered
instead.
image: Remove deprecated FADE_CLASS_NAME_MAP
and IMAGE_PREVIEW_MASK_CLASS_NAME
pipes: Remove deprecated NzSafeNullPipe
segmented: Redesign the segmented component.
ngModel
is changed from index
to option's valuenzValueChange
from number
to option's value type (string | number
)nzLabelTemplate
, use nz-segmented-item
directive insteadspace: Rename exportAs
of NzSpaceComponent
from NzSpace
to standard nzSpace
transfer: Rename nzTreeCheckBoxChange
to nzTreeCheckboxChange
tree,tree-select: Rename nzCheckBoxChange
to nzCheckboxChange
The following APIs are marked as deprecated in v19 and will be removed in the next major version. Please refer to related documentation for better alternatives.
| Module | API |
|-------------------------------------|----------------------------------------------------------|
| ng-zorro-antd/button
| NzButtonGroupComponent
|
| ng-zorro-antd/core/form
| NzFormPatchModule
|
| ng-zorro-antd/checkbox
| NzCheckboxWrapperComponent
|
| ng-zorro-antd/input
| NzInputGroupComponent#nzCompact
|
| ng-zorro-antd/input-number-legacy
| *
|
| ng-zorro-antd/message
| NzMessageModule
|
| ng-zorro-antd/notification
| NzNotificationModule
<br/>NzNotificationServiceModule
|
Changelog
19.0.1 (2025-01-03)
nzFormat
(#8744) (1b7ab5a)zh_TW
(#8950) (9607e11)NG0600
error (#8955) (8d6135e)nzBorderless
input (#8741) (22ce17c)vi_VN
(#8894) (f08ad1c)nzTreeNodePadding
not works in virtual scroll (#8920) (82b660a)ngClass
and ngStyle
(#8895) (c3ab3ba)FADE_CLASS_NAME_MAP
and IMAGE_PREVIEW_MASK_CLASS_NAME
(#8912) (65223d9)CheckBox
to Checkbox
(#8934) (c76433d5)nzPlacement
(#8935) (6fbd22c)nz-checkbox-group
component (#8932) (489e0de)nzVariant
option (#8827) (2c63c87)nz-icon
tag selector (#8778) (1406241)nzTriggerSubMenuAction
to support click trigger for submenu (#8461) (860df87)nzStatusRender
to support customize state rendering (#8714) (6f36d75)nzSortDirections
to global config (#6613) (#8721) (eb1fdc5)nzOneWay
to support one way style (#8717) (99fd4de)All
nzClass
/ nzStyle
input properties no longer support the following features:
Set()
: use arrays instead@WithConfig
to standard decorator. If you're using @WithConfig
in your library, please turn experimentalDecorators
off in tsconfig.json
[nz-icon]
to nz-icon
tag. If you're using [nz-icon]
selector in stylesheet to select icon inside zorro component, please use nz-icon
insteadinput-number: Redesign the input-number so that it will be much simpler and more flexible.
Now you can use affixes or addons as follows, no need for ng-template
and nz-input-number-group
:
<!-- Custom handler icons -->
<nz-input-number>
<nz-icon nzInputNumberUpIcon />
<nz-icon nzInputNumberDownIcon />
</nz-input-number>
<!-- With affixes -->
<nz-input-number>
<span nzInputPrefix>Prefix</span>
<span nzInputSuffix>Suffix</span>
</nz-input-number>
<!-- With addons -->
<nz-input-number>
<span nzInputAddonBefore>Before</span>
<span nzInputAddonAfter>After</span>
</nz-input-number>
The old input-number component is marked as deprecated, and its entrypoint had changed to ng-zorro-antd/input-number-legacy
.
NzInputNumberComponent
is now NzInputNumberLegacyComponent
, and NzInputNumberModule
is now NzInputNumberLegacyModule
.
Don't worry, ng update ng-zorro-antd
will automatically do the migration.
cascader: Cancel support for writing value with NzCascaderOption[]
type.
In the past, the cascader component kept a trick that if you wrote value with NzCascaderOption[]
type, it extracted value by mapping each item to its value property, for example:
@Component({
template: `<nz-cascader [nzOptions]="options" [ngModel]="value"></nz-cascader>`
})
export class ExampleComponent {
value = [{ label: 'NG ZORRO', value: 'ng-zorro-antd' }]
}
then the value of cascader would be 'ng-zorro-antd'
.
It's strange that the input and output values don't match when we haven't changed the values, and it's hard to maintain. We expect that the value passed in should be the value in the list of options.
In v19, this trick is removed and if you're already using this trick in your code, please consider the add a map
function to pass the actual value.
checkbox Redesign the checkbox group component.
NzCheckBoxOptionInterface['checked]
field. By the way, NzCheckBoxOptionInterface
is marked as deprecated, use NzCheckboxOption
insteadnz-checkbox-group
: Type of ngModel
is changed from NzCheckBoxOptionInterface[]
to NzCheckboxOption['value'][]
card: Remove redundant nzBorderless
input property. Use nzBordered
instead.
image: Remove deprecated FADE_CLASS_NAME_MAP
and IMAGE_PREVIEW_MASK_CLASS_NAME
pipes: Remove deprecated NzSafeNullPipe
segmented: Redesign the segmented component.
ngModel
is changed from index
to option's valuenzValueChange
from number
to option's value type (string | number
)nzLabelTemplate
, use nz-segmented-item
directive insteadspace: Rename exportAs
of NzSpaceComponent
from NzSpace
to standard nzSpace
transfer: Rename nzTreeCheckBoxChange
to nzTreeCheckboxChange
tree,tree-select: Rename nzCheckBoxChange
to nzCheckboxChange
The following APIs are marked as deprecated in v19 and will be removed in the next major version. Please refer to related documentation for better alternatives.
| Module | API |
|-------------------------------------|----------------------------------------------------------|
| ng-zorro-antd/button
| NzButtonGroupComponent
|
| ng-zorro-antd/core/form
| NzFormPatchModule
|
| ng-zorro-antd/checkbox
| NzCheckboxWrapperComponent
|
| ng-zorro-antd/input
| NzInputGroupComponent#nzCompact
|
| ng-zorro-antd/input-number-legacy
| *
|
| ng-zorro-antd/message
| NzMessageModule
|
| ng-zorro-antd/notification
| NzNotificationModule
<br/>NzNotificationServiceModule
|
Changelog
18.2.1 (2024-11-15)
a
tag problem with null
or undefined
value if TemplateRef provided (#8864) (41f6609)nzSelectChange
event (#8872) (5ff9821)Changelog
18.2.0 (2024-11-07)
nb_NO
(#8712) (8c9bcd1)hu_HU
(#8769) (9e21ae8)nzVisibleChange
when close on navigation (#8850) (29827df)nzMask
is false (#8798) (f2f04fe)Changelog
18.1.1 (2024-08-20)
Changelog
18.1.0 (2024-07-25)
compositionstart
event (#8641) (17b0ea3)pt_BR
(#7790) (6fc1c78)fr_BE
, fr_CA
, fr_FR
and lv_LV
(#8614) (9b69410)RouterLink
in template (#8621) (032a0c2)nzRouteFn
(#6313) (6d805c4)en_AU
(#7919) (c4e6c8d)provideNzIcons
and provideNzIconsPatch
API (#8650) (b22672d)nzSummary
(#8639) (20bb5b2)nzFixed
for nzSummary
(#8642) (bef12e6)nzNotFoundContent
(#8638) (13e8a45), closes #8631Changelog
18.0.1 (2024-06-27)
de_DE
(#8605) (8d75378)fa_IR
(#8597) (9c6e4bf)Changelog
18.0.0 (2024-06-06)
left
| right
to start
| end
(#8561) (3ad5674)No need to wrap Less functions provided by antd (including colorEasing
, colorPalette
, tinycolor
) with ~`` anymore.
- color(~`colorPalette('@{primary-color}', 5)`)
+ color(colorPalette('@{primary-color}', 5))