NG-ZORRO Blog

ng-zorro-antd 8.0.0 released

Sat, 29 Jun 2019 17:29:18 GMT

Intro

Welcome to ng-zorro-antd 8.0.0. After upgrading to the latest version, developers can not only enjoy the latest version of Angular, but also get the latest features and better performance.

You need to update your Angular to ^8.0.0 before update. Some ng-zorro-antd APIs are deprecated in version 8.0.0, and all deprecated APIs will still be supported until 9.0.0, which means that version 8.0.0 is fully compatible with version 7.0.0. Developers can get detailed tips on deprecated APIs in the development environment (prompts will not appear in production environments) and have plenty of time to fix these usages before 9.0.0 is released.

New Typography Component, which provides basic formatting and common operations for text.
Support admin template when run ng add ng-zorro-antd, more info can be found in Schematics part.

The Form Component has been fully enhanced, developers only needs to pass in the error tips.

<nz-form-control nzErrorTip="Please input your username!">
  <nz-input-group [nzPrefix]="prefixUser">
    <input formControlName="userName" nz-input placeholder="Username" />
  </nz-input-group>
</nz-form-control>

There is no need to wrap the dropdown directive with nz-dropdown now.

<a nz-dropdown [nzDropdownMenu]="menu">Hover me</a>
<nz-dropdown-menu #menu="nzDropdownMenu">
  <ul nz-menu>
    <li nz-menu-item>1st menu item</li>
    <li nz-menu-item>2nd menu item</li>
    <li nz-menu-item>3rd menu item</li>
  </ul>
</nz-dropdown-menu>

Menu support automatic highlighting based on routing.

<ul nz-menu nzMode="horizontal">
  <li nz-menu-item nzMatchRouter>
    <a [routerLink]="['/', 'welcome']">Welcome</a>
  </li>
</ul>

Angular Update Guide

It is recommended to upgrade according to the Angular Update Guide prompt. The following questions may require additional attention:

The usage of ViewChild and ContentChild has changed. Ref Static Query Migration Guide.
The usage of lazy load has changed. Ref loadChildren string synatx.
New Differential Loading feature. Ref Differential Loading.

Features

avatar: add nzSrcSet & nzAlt properites (#3583) (d0ad5e8), closes #3543
breadcrumb: support dropdown (#3636) (9dfab45)
carousel: support dot position (#3575) (0566331)
core: add universal logger funcs and deprecation warnings (#3538) (b893520)
form: refactor form to support better template driven (10d0e28)
input-number: support nzId (a6500c8)
menu: support auto active menu-item via routerLink (c9e84c7)
menu: support nzTitle & nzIcon in nz-submenu (0cde4d7)
pagination: support pagination nzDisabled (141bef8)
select: support custom template in select component (#3071) (aad02a5), closes #2946
table: support nzVirtualForTrackBy (cb14096)
transfer: add nzShowSelectAll & nzRenderList properties (#3588) (1619f30), closes #3567 #2870
typography: add typography component (#3119) (4d739ef)
schematics: add template option in ng-add (#3674) (69072de)

Bug Fixes

button: fix order of DOM nodes in button (#3578) (c3df8b5), closes #3079
card: fix card tab ng-template (#3654) (7585ba4)
descriptions: fix warning without logger (#3663) (5826fc1)
dropdown: dropdown should close when set disabled (0bd1ae3), closes #3420
dropdown: fix dropdown change after checked bug (16d5c2d)
dropdown: fix dropdown SSR bug (#3628) (ade1abd)
form: fix form control validate with formControl (bc54e90), closes #3551
form: fix form overlap (#3633) (0fc7d05), closes #3607
form: fix nzValidateStatus & nzHasFeedback overlap (fb4965b), closes #3607
grid: Make all properties in EmbeddedProperty optional (#3473) (107e731)
input: fix ng-content nzAddOnBeforeIcon transclusion (#3597) (a37ec0a), closes #3596
mention: fix cannot to switch trigger (#3632) (c8b5b09), closes #3629
menu: fix menu title ExpressionChangedAfterItHasBeenCheckedError (52975ff), closes #3023
menu: fix submenu not active when collapsed (67f6fa2), closes #3345
pagination: fix pagination nzTotal 0 bug (#3651) (d28fc49), closes #3648
select: fix nzOpen state when nzOnSearch trigger (3ca816d), closes #3626
select: fix select enter open when disabled (36db36c), closes #3408
select: fix the bug of duplication when keyboard input chinese char (#3440) (3c82f26), closes #3439
table: compatible with @angular/material/table (79b02ca)
table: fix sortChange with dynamic columns (#3603) (#3605) (c85743d)
typography: fix the actions button order (#3677) (c2c28a4)
typography: not render when the edit text has no changes (51b9ce0)

(This is an article posted to blog at ng-zorro blog. You can read it online by clicking here.)

Hello NG-ZORRO Blog!

Tue, 11 Jun 2019 13:40:32 GMT

From now on, we will use the blog which you’re reading as our main channel for publishing dev blogs, release notes and knowledge sharing. Our old stories published on Medium would be migrated here gradually.

We made the decision for the following reasons:

Open

Say good by to Medium.

Source code of this blog and all posts are open. Anyone have access to them at anytime, anywhere.
Users don’t need to register to join in discussions.
Users could subscribe using RSS.
Friends from community could contribute to our blog in an open and convenient way.

Improved Reading Experience

The build-in Dark Mode could protect your eyes in dimmed environments.
Multi languages supported!. Readers could select a language that they find most comfortable with, even contribute to the translations.
In the future, users could explore old blog by categories or tags.

Better Writing and Maintaining Experience

Get rid of the horrible editor of Medium! Writes could leverage markdown to enjoy writing!
Google Analytics could help us have a better understanding of users’ behaviour, so we could provide better service to users and power up the development of our projects.

Please add our website https://ng.ant.design/blog/ to your bookmarks!

NG-ZORRO Team with ❤️

(This is an article posted to blog at ng-zorro blog. You can read it online by clicking here.)

NG-ZORRO Advanced - Customized Switching Strategy

Tue, 04 Jun 2019 13:40:32 GMT

In a previous refactoring of the carousel component, we separated code that actually does switching animations with other code. This approach not only make the component maintainable, but also makes it possible for users to implement their own switching strategies. This article would take a flip strategy as an example to show you how to leverage this advanced feature.

Requires ng-zorro-antd 7.5.0 and above.

You can click here to preview the result.

And find the source code here.

To implement and use a customized switching strategy, you need to:

Defined a class that inherits NzCarouselBaseStrategy to implement a switching strategy.
Provide this class with injection token NZ_CAROUSEL_CUSTOM_STRATEGIES.
Use your switching strategy in nz-carousel by assign nzEffect with a name that you pre-defined.

Implement Switching Strategy `FlipStrategy`

To implement a strategy, you just have to inherit and implement the abstract class NzCarouselBaseStrategy provided by ng-zorro-antd. You should implement three methods of this abstract class.

withCarouselContents. This method will be invoked when the carousel component inits, the carousel items change or the switching strategy is changed. It should setup for switching in this method.
switch. This method will be invoked when the currently activated carousel item changes. It should do animations.
dispose. This method will be invoked when the carousel component destroys or the switching strategy is replaced by another. It should revert setup by withCarouselContents.

Let’s have an insight of the implementation of FlipStrategy.

`withCarouselContents`

When it’s invoked, the first thing it needs to do is to invoke its parent class to prepare util properties.

super.withCarouselContents(contents)

NzCarouselBaseStrategy provided util properties that could help developers implement switching effect conveniently.

Then, it set styles of the slick list element and the slick track element. As of flip switching effect, all elements should be in the same position. So width of the slick list element should be unitWidth.

this.renderer.setStyle(this.slickListEl, 'width', `${this.unitWidth}px`)
this.renderer.setStyle(
  this.slickTrackEl,
  'width',
  `${this.length * this.unitWidth}px`
)

After that, it set styles of elements of carousel items. For the currently activated carousel item, its element should not be flipped while others should be flipped. The elements are also moved to the correct position by left style. Their transition is set, too.

this.contents.forEach((content: NzCarouselContentDirective, i: number) => {
  const cur = this.carouselComponent.activeIndex === i

  this.renderer.setStyle(
    content.el,
    'transform',
    cur ? 'rotateY(0deg)' : 'rotateY(180deg)'
  )
  this.renderer.setStyle(content.el, 'position', 'relative')
  this.renderer.setStyle(content.el, 'width', `${this.unitWidth}px`)
  this.renderer.setStyle(content.el, 'left', `${-this.unitWidth * i}px`)

  this.renderer.setStyle(content.el, 'transform-style', 'preserve-3d')
  this.renderer.setStyle(content.el, 'backface-visibility', 'hidden')
})

`switch`

When the currently activated item changes, the carousel component would call this method, and subscribe the Observable object it returns. So, a Subject.asObservable() is returned here, and it would next and complete when the switching animation is done.

const complete$ = new Subject<void>()
const speed = this.carouselComponent.nzTransitionSpeed

timer(speed).subscribe(() => {
  complete$.next()
  complete$.complete()
})

// ...

return complete$.asObservable()

Then, this method would start animation.

First get from and to indexes in the boundary.

const { from, to } = this.getFromToInBoundary(rawF, rawT)

Parameters passed to the method switch(rawF: number, rawT: number): Observable<void> are not always between 0 and the number of carousel items. Because some strategies, like TransformStrategy may want to know they are switching from the last to the first instead of back to the first. So NzCarouselBaseStrategy provides a method called getFromToInBoundary for developers to get indexes in boundary.

Then, it reset transform property of elements of carousel items.

this.contents.forEach((content: NzCarouselContentDirective, i: number) => {
  if (i === from) {
    this.renderer.setStyle(content.el, 'transform', 'rotateY(180deg)')
  } else if (i === to) {
    this.renderer.setStyle(content.el, 'transform', 'rotateY(0deg)')
  }
})

So a flipping effect is completed! How simple is that?

`dispose`

This method is relatively simple.

dispose(): void {
  this.contents.forEach((content: NzCarouselContentDirective) => {
    this.renderer.setStyle(content.el, 'transition', null);
    this.renderer.setStyle(content.el, 'transform-style', null);
    this.renderer.setStyle(content.el, 'backface-visibility', null);
  });

  super.dispose();
}

Provide new Switching Strategy

In app.module.ts we provide custom switching strategy.

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'

import { AppComponent } from './app.component'
import { NZ_CAROUSEL_CUSTOM_STRATEGIES, NzCarouselModule } from 'ng-zorro-antd'
import { FlipStrategy } from './flip-strategy'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NzCarouselModule],
  providers: [
    {
      provide: NZ_CAROUSEL_CUSTOM_STRATEGIES,
      useValue: [
        {
          name: 'flip',
          strategy: FlipStrategy,
        },
      ],
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Use the new Switching Strategy

The last step is just to pass the name you defined in the previous step to nzEffect input.

<nz-carousel [nzEffect]="'flip'" [nzDotRender]="dotTpl">
  <div nz-carousel-content>A</div>
  <div nz-carousel-content>B</div>
  <div nz-carousel-content>C</div>
  <div nz-carousel-content>D</div>
</nz-carousel>

So, you get a carousel component that flips. Congratulations!

What abound Dragging?

If you implement dragging of NzCarouselBaseStrategy, you can make your strategy support dragging. Try it yourself!

dragging(_vector: PointerVector): void {}

Reference

Strategy pattern. As the name suggests, this switching strategy thing follows strategy pattern. You may want to have a through understanding about it.

(This is an article posted to blog at ng-zorro blog. You can read it online by clicking here.)

NG-ZORRO Blog

ng-zorro-antd 8.0.0 released

Intro

Angular Update Guide

Features

Bug Fixes

Hello NG-ZORRO Blog!

Open

Improved Reading Experience

Better Writing and Maintaining Experience

NG-ZORRO Advanced - Customized Switching Strategy

Implement Switching Strategy FlipStrategy

withCarouselContents

switch

dispose

Provide new Switching Strategy

Use the new Switching Strategy

What abound Dragging?

Reference

Implement Switching Strategy `FlipStrategy`

`withCarouselContents`

`switch`

`dispose`