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.




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

Treehole, an anonymous discussion forum using NG-ZORRO


Github page:

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.

NPM Trends

NPM trend of angular-material vs ng-zorro-antd in past 6 months
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.

Design System

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.

A page in Ant Design

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




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

Way More Components

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:

Easy Customized Theme

This is my Angular Material custom theme style file: (~30 lines):

// Custom Theming for Angular Material
// For more information:
@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes:
$superheros-angular-primary: mat-palette($mat-teal);
$superheros-angular-accent: mat-palette($mat-indigo, A200, A100, A400);

// The warn palette is optional (defaults to red).
$superheros-angular-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$superheros-angular-theme: mat-light-theme(

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($superheros-angular-theme);

This is my NG-ZORRO custom them style file: (~900 lines):

@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";
@theme: default;

// The prefix to use on all css classes from ant.
@ant-prefix: ant;

// An override for the html selector for theme prefixes
@html-selector: html;

// -------- Colors -----------
@primary-color: @green-8;
@info-color: @green-6;
@success-color: @blue-6;
@processing-color: @blue-6;
@error-color: @red-5;
@highlight-color: @red-5;
@warning-color: @gold-6;
@normal-color: #d9d9d9;
@white: #fff;
@black: #000;


// Background color for `<body>`
@body-background: #fff;
// Base background color for most components
@component-background: #fff;
// Popover background color
@popover-background: @component-background;
@popover-customize-border-color: @border-color-split;
@font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@code-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
@text-color: fade(@black, 65%);
@text-color-secondary: fade(@black, 45%);
@text-color-inverse: @white;
@icon-color: inherit;
@icon-color-hover: fade(@black, 75%);
@heading-color: fade(#000, 85%);
@heading-color-dark: fade(@white, 100%);
@text-color-dark: fade(@white, 85%);
@text-color-secondary-dark: fade(@white, 65%);
@text-selection-bg: @primary-color;
@font-variant-base: tabular-nums;
@font-feature-settings-base: "tnum";
@font-size-base: 14px;
@font-size-lg: @font-size-base + 2px;
@font-size-sm: 12px;
@heading-1-size: ceil(@font-size-base * 2.71);
@heading-2-size: ceil(@font-size-base * 2.14);
@heading-3-size: ceil(@font-size-base * 1.71);
@heading-4-size: ceil(@font-size-base * 1.42);
@line-height-base: 1.5715;
@border-radius-base: 2px;
@border-radius-sm: @border-radius-base;

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.

Loading State

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.

Accessibility Support

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.

“Security Concerns”

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.


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