Trying out NG-ZORRO
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.
Website: https://ng.ant.design
Below is a website I create using NG-ZORRO, it is a discussion forum:
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.
NPM Trends
https://www.npmtrends.com/angular-material-vs-ng-zorro-antd
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
- NG-ZORRO: Ant Design
- Angular Material: Material Design
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.
Here is a list of libraries that implement these 2 design systems:
Angular
- Ant Design: NG-ZORRO
- Material Design: Angular Material
React
- Ant Design: antd
- Material Design: Material-UI
Vue
- Ant Design: ant-design-vue
- Material Design: Vue Material
React Native
- Ant Design: @ant-design/react-native
- Material Design: react-native-paper
Also, from Material Design’s website, besides the web, it also supports native and hybrid mobile (iOS, Android, and flutter).
Team
- 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: https://github.com/xiongemi/superhero-search-engine/blob/master/src/styles/custom-theme.scss (~30 lines):
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@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: https://material.io/design/color/
$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(
$superheros-angular-primary,
$superheros-angular-accent,
$superheros-angular-warn
);
// 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: https://github.com/xiongemi/treehole-angular-firebase/blob/master/src/theme.less (~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,
monospace;
@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);
// https://github.com/ant-design/ant-design/issues/20210
@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
Documentation
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.
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~
