Background: NG-ZORRO is an Angular UI library that is based on the Ant Design System used by Alibaba. I have heard about this library so many times, but I have never used it in the past.

I am a developer in Toronto right now and I mostly use Angular Material. I think NG-ZORRO is definitely popular in China. I always want to try it out so I have created a simple project using this library. This blog describes my developer experience using NG-ZORRO for the first time.

Image for post
Image for post
NG-ZORRO

Website: https://ng.ant.design

Github: https://github.com/NG-ZORRO/ng-zorro-antd

Below is a website I create using NG-ZORRO, it is a discussion forum:

Image for post
Image for post
Treehole, an anonymous discussion forum using NG-ZORRO

Github: https://github.com/xiongemi/treehole-angular-firebase

Github page: https://xiongemi.github.io/treehole-angular-firebase

NG-ZORRO vs Angular Material

Since I came from Angular Material background, but it is hard for me to not compare this library with Angular Material.

https://www.npmtrends.com/angular-material-vs-ng-zorro-antd

Image for post
Image for post
NPM trend of angular-material vs ng-zorro-antd in past 6 months
Image for post
Image for post
NPM trend of angular-material vs ng-zorro-antd in past 5 years

As shown above, the Angular Material is still the more popular Angular UI library. It still got a lot more NPM downloads than NG-ZORRO. However, ng-zorro-antd got a strongly growing number of NPM downloads over the years.

I am not a designer, but I do think that both design systems support responsive web design.

However, at the time when I wrote a blog, there are a few pages of Ant Design is written in Chinese only.

Image for post
Image for post
A page in Ant Design

Here is a list of libraries that implement these 2 design systems:

Angular

React

Vue

React Native

Also, from Material Design’s website, besides the web, it also supports native and hybrid mobile (iOS, Android, and flutter).

  • NG-ZORRO: Alibaba
  • Angular Material: Google

These are definitely 2 tech giants from east and west. There are definitely large communities around both libraries and good support as well.

What I Like

NG-ZORRO offers way more out-of-box components than Angular Material.

At the time when I wrote the blog, NG-ZORRO has 61 components listed on its website, whereas Angular Material has 35 components. Even though sometimes it is not all about numbers, but for this simple project I created, I do find NG-ZORRO provides all the components I needed.

The project I created is a discussion forum, besides the basic components, there are a lot of out of box component I could use, such as Comment:

This is my Angular Material custom theme style file: https://github.com/xiongemi/superhero-search-engine/blob/master/src/styles/custom-theme.scss (~30 lines):

This is my NG-ZORRO custom them style file: https://github.com/xiongemi/treehole-angular-firebase/blob/master/src/theme.less (~900 lines):

NG-ZORRO exposes way more style variables. The Angular Material custom theme allows specifying the overall color palette, whereas NG-ZORRO allows specifying almost everything (spacing, font size, line height…). So it is easy for developers to override and customize the styles.

Many components have this nzLoading input, so it is very simple to have a loading state of a component.

For example:

If my component needs to wait for an asynchronous action, I do not create any spinner, this library will take care.

Besides spinner, it also offers a skeleton component as a loading state placeholder:

What I Don’t Like

As I mentioned before, a few of this library’s documentation is written in Chinese only, and sometimes it popup Chinese on its English documentation. I can read Chinese, but it would be definitely hard for non-Chinese developers to learn.

At the time of this blog, there are still a few open issues about accessibility:

I have analyzed my app using Axe and I found a couple of violations.

I am a developer in Toronto and I have heard some government and enterprise projects in Canada do not want to use NG-ZORRO due to “security concerns” despite it is an open-source library.

Conclusion

This concludes my little side project to try out NG-ZORRO.

Overall, I do find NG-ZORRO easy to use and integrate. It definitely offers a lot more high-quality and complex components; however, at the same time, it definitely has issues and limitations.

There is definitely a big ecosystem built around Ant Design. I am always curious and it is quite interesting to see developers from all over the world interact on GitHub/StackOverflow.

😀💪Happy coding~

A frontend web developer in Toronto

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store