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:
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.
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.
Here is a list of libraries that implement these 2 design systems:
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:
Comment | NG-ZORRO
A comment displays user feedback and discussion to website content. Comments can be used to enable discussions on an…
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
// 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!
// 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-accent: mat-palette($mat-indigo, A200, A100, A400);
// The warn palette is optional (defaults to red).
// Create the theme object (a Sass map containing all of the palettes).
// 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.
This is my NG-ZORRO custom them style file: https://github.com/xiongemi/treehole-angular-firebase/blob/master/src/theme.less (~900 lines):
// The prefix to use on all css classes from ant.
// An override for the html selector for theme prefixes
// -------- Colors -----------
// Background color for `<body>`
// Base background color for most components
// Popover background color
@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%);
@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%);
@font-size-lg: @font-size-base + 2px;
@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);
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.
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:
Skeleton | NG-ZORRO
Ant Design, a design language We supply a series of design principles, practical patterns and high quality design…
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:
Add accessibility/WCAG2/ARIA support · Issue #4707 · NG-ZORRO/ng-zorro-antd
Dismiss GitHub is home to over 50 million developers working together to host and review code, manage projects, and…
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.
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.