Analysis on the introduction of angular into ng zorro

The website of ng-zorro provides two ways to add ng-zorro to the project. The second self-built way provided by ng-zorro is recorded below.

Step 1: Execute this command to create a new angular project. If angular/cli is not installed, do the installation

ng new new-project

Step 2: Add ng-zorro

npm install ng-zorro-antd --save

Step 3: Introducing modules

Introduced in the app. module. ts file

import { NgZorroAntdModule } from 'ng-zorro-antd';

......
imports: [ 
BrowserModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
/**  Import  ng-zorro-antd  Module  **/ 
NgZorroAntdModule
]
......

Step 4: Introducing styles into the angular. json file

{ 
"assets": [
... 
], 
"styles": [ 
... 
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
] }

Step 5: Introduce component styles under the entry style. css or style. less file

@import "~ng-zorro-antd/style/index.min.css"; /*  Introducing basic styles  */
@import "~ng-zorro-antd/button/style/index.min.css"; /*  Introducing component styles  */

Or

@import "~ng-zorro-antd/style/entry.less"; /*  Introducing basic styles  */
@import "~ng-zorro-antd/button/style/entry.less"; /*  Introducing component styles  */

Then you can use ng-zorro in the required components.

Summarize