NG-ZORRO-ANTD 7.0.0 Release Note
NG-ZORRO-ANTD ranked 5th in Angular Ecosystem category of 2018 JavaScript Rising Stars! Check it out! 🙌
It has been three months since we released the last stable version 1.8.1, and now here comes ng-zorro-antd 7.0.0! (From 7.0.0, the package’s major version number would be aligned to Angular’s)
According to the road map we published last year, we add 105 commits on the top of the last three release candidate versions. Now we have reached Milestone I.
- All components now work with OnPush change detection strategy. You can anticipate a tremendous improvement of performance.
- Animations are updated to meet Ant Design’s specifications. And you can configure animation globally or specifically to each component.
- New components: Empty, Statistic, Countdown and Comment.
- New features of Angular CDK is introduced to some components. For example, Table component now supports virtual scrolling.
- Lots of new features. Lots of bug fixes.
- You can use ISO date format in components like Calendar & Date Picker.
- Global scrolling strategy is changed. Modal and Drawer components will no longer shake under some circumstances.
- More strict TypeScript compiler options (tsconfig). (We are still working on this. You can track this issue.)
- Brand new logo and documentation site.
Update Guidance
- Update Angular and other packages to newest versions.
- Update ng-zorro-antd to 7.0.
Notice
Pay attention to these changes to ensure that your code works as expected:
- All components now work with OnPush strategy. Components with this strategy would not respond to mutations on object properties or array child items, even decorated with
@Input()
. So you should make all your@Input
properties immutable objects. Not only this would ensure your code works correctly but also improve performance if you use immutable objects right. Please checkout our example below. - We correct the meaning of
nzDropdownMatchSelectWidth
of Select component. Now it means exactly opposite of the old one. - If you want to add a button to an
input-group
in search mode, you should usenzAddOnAfter
instead ofnzSuffix
.
Example
In this example, this.value.push('jack')
would not trigger change detection. However,this.value = [ ...this.value, 'jack' ]
works. Please refer to this article (These 5 articles will make you an Angular Change Detection expert) if you want to have a comprehensive understanding of Angular’s change detection.
import { Component, OnInit } from '@angular/core';@Component({
selector: 'nz-demo-select-basic',
template: `
<nz-select [(ngModel)]="value" nzMode="multiple">
<nz-option nzValue="jack" nzLabel="Jack"></nz-option>
<nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
</nz-select>
`
})
export class NzDemoSelectBasicComponent implements OnInit {
value = [ 'lucy' ];ngOnInit(): void {
setTimeout(() => {
// this.value.push('jack'); // Mutation on the object would not trigger change detection.
this.value = [ ...this.value, 'jack' ]; // This works!
}, 3000);
}
}
Changelog
Bug Fixes
- affix: fix should reset placeholder size when trigger resize event (#2835) (7068a5e), closes #2818
- anchor: fix called detectChanges when component destroy (#2864) (0e5c937), closes #2860
- animation: move hostbinding to constructor to fix angular transition bug (#2895) (e39f6bf)
- build: fix ES6 build target error (#2921) (ab62b40), closes #2893
- carousel: fix carousel does not display in modal or card (#2699) (e092bf0), closes #2387 #2226
- carousel: fix carousel does not render when window resizes (#2699) (e092bf0), closes #2158
- carousel: fix carousel item cannot be clicked (#2699) (e092bf0), closes #2631
- cascader: fix searching error when nzOptions is empty (#2846) (e33cc50), closes #2784
- cascader: fix children state not changed (#2986) (b87e8bb)
- core: fix the style of CDK conflicts (#2917) (37cf6f3), closes #2874
- date-picker, calendar, time-picker: provide a option to resolve the week number that is not according to ISO standard algorithm (#2819) (e1bce41), closes #2819 #2406
- drawer: fix body overflow problem (#2867) (1e081f0), closes #2227 #2615
- grid: fix grid responsive (#2915) (ab05619), closes #2908
- i18n: Danish locale is exported and mentioned in i18n docs (#2599) (6554cf5)
- i18n: update missing fields in fr_FR (#2586) (#2737) (c821d56)
- icon: fix falsy render (#2912) (6dd3cbf), closes #2911
- input: fix *fix icon new API capability (#2841) (3c954cb)
- menu, dropdown: fix dropdown in firefox (#2816) (09f21d0), closes #2834
- modal, drawer: IE/Edge SVG doesn’t support
blur
/focus
method (#2869) (7487a7e), closes #2388 - modal: fix body overflow problem (#2869) (7487a7e), closes #2612
- modal: unable to close the mask if the container is OnPush (#2869) (7487a7e), closes #2643
- radio: children unable to focus in radio label (#2850) (58743b8), closes #2774
- select: can not location to the selected value (#2741)
- select: fix multiple value not grow error (#2741)
- select: fix nzScrollToBottom bug when browser zoom (#2741)
- switch: fix switch error when loading or disabled (#2896) (a67984c), closes #2787
- table: fix border style error in Firefox (#2862) (074083e)
- table: fix th sort in ngIf (#2862) (074083e)
- table: multiple columns style nzRight (#2862) (074083e)
- time-picker: place the clear button adjustment to the outer input box (#2948) (ffb6665)
- tooltip: fix setTitle proxy to nzTitle (#2698) (f6dfbd9), closes #2695
- tree-select: fix tree-select overlay’s index problem (#2764) (599ae1a), closes #2730
- tree: Fix nzShowIcon not working for false (#2724) (36c91ac), closes #2724
- tree: Fix parent-child node association problem in nzCheckStrictly state (#2655 #2370) (36c91ac), closes #2655 #2370
- tree: Fix the loading icon position offset problem (#1998) (36c91ac), closes #1998
- tree: Fix the state sync problem of setChecked method (#2273) (36c91ac), closes #2273
- tree: fix animation of expand method (#2989) (5142d18)
Features
- auto-complete: close panel when the trigger element blur (#2916) (1e075f9), closes #2885
- badge: support nzCount input TemplateRef (#2880) (fd0d91c)
- cascader: reposition cascader when column opens (#2836) (289ba54), closes #2181 #2809
- collapse: support custom icon (#2783) (a530f80)
- comment: add comment component (#2767) (14859c8), closes #2731
- date-picker, calendar: support custom first day of week for all date components (#2819) (e1bce41), closes #2293 #2073
- date-picker: support
nzDisabledDate
foryear-picker
(#2949) (71dda9b), closes #2194 - empty: add empty component (#2722) (8906dff), closes #2711
- icon: support rotate (#2891) (07f76af), closes #2888
- icon: update dependency to support namespace (#2641) (a2000fa)
- layout: support zeroTrigger (#2938) (4e4231d), closes #1950 #1951
- menu, dropdown: support nest demo (#2816) (09f21d0), closes #1697
- modal: support set
nzOkDisabled
andnzCancelDisabled
(#2856) (fa6a8e9), closes #1838 - notification: support nzData as context in template (#2926) (51940f7), closes #2755
- popconfirm: support custom icon (#2964) (ff030ff), closes #2196
- rate: add tooltip support (#2794) (e121bd3)
- select: support automatic tokenization (#2741)
- select: support maxTagCount & maxTagCountPlaceholder (#2741)
- slider: support nzTooltipVisible (#2930) (d3e61d4), closes #2373
- statistic: add statistic component (#2760) (abb9ae4), closes #2754
- table: support nzItemRender (#2862) (074083e)
- table: support pagination position (#2862) (074083e)
- table: support text align (#2862) (074083e)
- tabs: support tab lazy load (#2968)
- tree-select: support set
nzNotFoundContent
(#2740) (d9055f5) - tree: Search feature supports hiding unmatched nodes (#2208) (36c91ac), closes #2208
- tree: Supports get nzTreeNode instance with key (#2455) (36c91ac), closes #2455
- tree: Supports operations such as deleting nodes (state sync) (#1399 #2384) (36c91ac), closes #1399#2384
- upload: support with non-image format file preview (#2709) (4c41715)
We will move on to Milestone II right after this release. Server side rendering (SSR), secondary package entries, global configurations and dynamic validation would be supported in future versions.
Hope you like ng-zorro-antd 7.0.0. Issues and pull requests are always welcomed.
Thank you!