explaingit

ng-zorro/ng-zorro-antd

9,142TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

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.

Mindmap

mindmap
  root((ng-zorro-antd))
    What it does
      70+ UI components
      Ant Design styling
      Theme customization
      i18n support
    Tech
      Angular framework
      TypeScript
      Electron support
    Use Cases
      Enterprise web apps
      Multi-language apps
      Desktop apps
    Setup
      npm install
      Angular CLI wiring
      Module imports
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add enterprise-style UI components like tables, date pickers, and modals to an Angular app without building them from scratch.

USE CASE 2

Build a multi-language web app using the library's built-in internationalization support for dozens of locales.

USE CASE 3

Customize the visual theme to match a product's brand colors and style using the library's theming system.

USE CASE 4

Package a web app as a cross-platform desktop application using Electron with Ant Design components as the UI layer.

Tech stack

TypeScriptAngularAnt DesignnpmElectron

Getting it running

Difficulty · easy Time to first run · 30min

Requires an existing Angular project, the Angular CLI handles wiring automatically after install.

In plain English

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.

Copy-paste prompts

Prompt 1
I'm adding ng-zorro-antd to my Angular project. Walk me through installing it with the Angular CLI and importing only NzTableModule and NzButtonModule so my bundle stays small.
Prompt 2
Help me build an Angular form using ng-zorro-antd: a text input, a date picker, a dropdown select, and a submit button with inline validation messages.
Prompt 3
Show me how to override the primary color theme in ng-zorro-antd so all buttons and links use my brand color instead of the default Ant Design blue.
Prompt 4
I need a paginated, sortable data table in Angular using nz-table with row selection and a loading spinner while data fetches.
Prompt 5
How do I switch the display language in an ng-zorro-antd app between English and Chinese at runtime using its i18n module?
Open on GitHub → Explain another repo

← ng-zorro on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.