Ant Design Introduction and Installation for Angular - GeeksforGeeks

21 Aug, 2020
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/
For Linux
https://www.geeksforgeeks.org/installation-of-node-js-on-linux/
Knowledge of setting up an Angular Projecthttps://www.geeksforgeeks.org/angular-7-installation/Installation of Ant Design of AngularIn 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-antdIn “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 -oOutput:Final Output in the browserMy Personal Notes
arrow_drop_upSave
https://www.geeksforgeeks.org/angular-7-installation/
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"}
{ "$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 { }
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>
<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 -oOutput:Final Output in the browserMy Personal Notes
arrow_drop_upSave
[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
ng serve -o
Output:
Final Output in the browser
AngularJS-Misc
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular PrimeNG Dropdown Component
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?