Open in app

Sign in

Write

Sign in

NG-ZORRO-ANTD 7.0.0 Release Note

Wendell Hu
NG-ZORRO
Published in
5 min readFeb 28, 2019

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.
Meet out new Logo! Thanks to our friends from Ant Design team. 💗

Update Guidance

  1. Update Angular and other packages to newest versions.
  2. Update ng-zorro-antd to 7.0.

Notice

Pay attention to these changes to ensure that your code works as expected:

  1. 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.
  2. We correct the meaning of nzDropdownMatchSelectWidth of Select component. Now it means exactly opposite of the old one.
  3. If you want to add a button to an input-group in search mode, you should use nzAddOnAfter instead of nzSuffix.

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

Features

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!

Angular
Ng Zorro
Component Libraries
Release Notes

--

--

Wendell Hu
NG-ZORRO

Written by Wendell Hu

15 Followers
Editor for

FE developer @tencent. Previously @alibaba. @NG-ZORRO core team member.

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams