Ant Design Introduction and Installation for Angular

Ant Design is a design pattern for enterprise-level products that can be integrated with other front-end frameworks such as Angular, React, or Vue. Ant Design official implementation is released with React but it can be used with other JavaScript frameworks. It is an open-source tool with approximately 50.4K GitHub stars, it is the world’s second most used React UI library. Many companies are using this design pattern like Alibaba, Tencent, Didi, etc.

Features of Ant Design:

• Supports internationalization.
• Rich and interactive user interface.
• Powerful theme customization.
• High-quality components are present.
• High performance.

Prerequisite:

• A code editor like VSCode, Sublime, Brackets, etc.
• NodeJS should be installed in the system

For Windows

https://www.geeksforgeeks.org/installation-of-node-js-on-windows/amp/

For Linux

https://www.geeksforgeeks.org/installation-of-node-js-on-linux/amp/

• Knowledge of setting up an Angular Project

https://www.geeksforgeeks.org/angular-7-installation/amp/

Installation of Ant Design of Angular

• In the terminal, go to that folder of the angular project which you have created, then install Ant Design of Angular by using the following command:

npm install ng-zorro-antd


• In “angular.json” file add Ant Design .css file in styles array as given below:

  {
   "$schema":
  "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
      "myAntApp": {
        "projectType": "application",
        "schematics": {
          "@schematics/angular:component": {
            "style": "scss"
          }
        },
        "root": "",
        "sourceRoot": "src",
        "prefix": "app",
        "architect": {
          "build": {
            "builder":
  "@angular-devkit/build-angular:browser",
            "options": {
              "outputPath": "dist/myAntApp",
              "index": "src/index.html",
              "main": "src/main.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "tsconfig.app.json",
              "aot": true,
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ],
              "styles": [
  "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
                "src/styles.scss"
              ],
              "scripts": []
            },
            "configurations": {
              "production": {
                "fileReplacements": [
                  {
                    "replace":
  "src/environments/environment.ts",
                    "with":
  "src/environments/environment.prod.ts"
                  }
                ],
                "optimization": true,
                "outputHashing": "all",
                "sourceMap": false,
                "extractCss": true,
                "namedChunks": false,
                "extractLicenses": true,
                "vendorChunk": false,
                "buildOptimizer": true,
                "budgets": [
                  {
                    "type": "initial",
                    "maximumWarning": "2mb",
                    "maximumError": "5mb"
                  },
                  {
                    "type": "anyComponentStyle",
                    "maximumWarning": "6kb",
                    "maximumError": "10kb"
                  }
                ]
              }
            }
          },
          "serve": {
            "builder":
  "@angular-devkit/build-angular:dev-server",
            "options": {
              "browserTarget": "myAntApp:build"
            },
            "configurations": {
              "production": {
                "browserTarget": "myAntApp:build:production"
              }
            }
          },
          "extract-i18n": {
            "builder":
  "@angular-devkit/build-angular:extract-i18n",
            "options": {
              "browserTarget": "myAntApp:build"
            }
          },
          "test": {
            "builder": "@angular-devkit/build-angular:karma",
            "options": {
              "main": "src/test.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "tsconfig.spec.json",
              "karmaConfig": "karma.conf.js",
              "assets": [
                "src/favicon.ico",
                "src/assets"
              ],
              "styles": [
                "src/styles.scss"
              ],
              "scripts": []
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": [
                "tsconfig.app.json",
                "tsconfig.spec.json",
                "e2e/tsconfig.json"
              ],
              "exclude": [
                "**/node_modules/**"
              ]
            }
          },
          "e2e": {
            "builder":
  "@angular-devkit/build-angular:protractor",
            "options": {
              "protractorConfig": "e2e/protractor.conf.js",
              "devServerTarget": "myAntApp:serve"
            },
            "configurations": {
              "production": {
                "devServerTarget": "myAntApp:serve:production"
              }
            }
          }
        }
      }},
    "defaultProject": "myAntApp"
  }
• In “app.module.ts” import the Ant Design button module, so that we can access it in .html file as given below:

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { NzButtonModule } from 'ng-zorro-antd/button';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      NzButtonModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
• In “app.component.html” file add the following code as given below:

  <button nz-button nzType="primary">Primary</button>
  <button nz-button nzType="default">Default</button>
  <button nz-button nzType="dashed">Dashed</button>
• Add some CSS in “app.component.scss” to show the buttons at the center as given below:

  [nz-button] {
    margin-left: 50%;
    margin-top: 3%;
  }
• In the terminal, run the application in the browser by using the following command:

  ng serve -o

Output:



Final Output in the browser