ng-zorro-antd
Angular UI Component Library based on Ant Design
A library of 70+ ready-made UI components for Angular apps, buttons, tables, date pickers, modals, and more, styled with Alibaba's Ant Design system so you don't have to design or code them from scratch.
Angular is a framework developers use to build web applications, and NG-ZORRO is a library of ready-made visual components for Angular apps. Components are the building blocks of a user interface: buttons, dropdown menus, date pickers, tables, modals, tabs, form fields, and so on. Instead of designing and coding all of those from scratch, you install this library and drop them into your app.
The component designs come from Ant Design, a design system originally created at Alibaba that specifies how enterprise-style applications should look and behave. NG-ZORRO brings that visual language to Angular. The library ships with more than 70 components, covers internationalization for dozens of languages, and supports detailed theme customization so the look can be adjusted to match a product's brand.
Installation is done through npm, the standard JavaScript package manager. The recommended path is to add it to an existing Angular project using the Angular CLI tool, which handles the wiring automatically. From there you import the specific component modules your pages need, rather than loading the entire library at once, keeping the app's download size smaller.
The library is written in TypeScript, which is a version of JavaScript that includes type information. That means code editors can flag mistakes before the code runs and offer autocomplete suggestions for component properties. It also supports server-side rendering and can run inside Electron, which is a tool for building desktop applications using web technologies.
NG-ZORRO is open source and maintained by a community that tracks changes in the upstream Ant Design specification to keep the Angular components in sync with the reference designs.
Where it fits
- Add enterprise-style UI components like tables, date pickers, and modals to an Angular app without building them from scratch.
- Build a multi-language web app using the library's built-in internationalization support for dozens of locales.
- Customize the visual theme to match a product's brand colors and style using the library's theming system.
- Package a web app as a cross-platform desktop application using Electron with Ant Design components as the UI layer.