Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use ng-zorro-antd in Angular, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

I. installation

Ng-zorro-antd itself is just a collection of antd component Angular implementations, so if you want to develop based on ng-zorro-antd, you still need to install Angular Cli first.

1. Create a project

# install global, which allows you to use the `ng` command directly on the CMD command line. Npm install-g @ angular/cli@latest# create project ng new demo# installation package npm install-- save ng-zorro-antd

2. Import module

I suggest importing the module in SharedModuel.

@ NgModule ({imports: [NgZorroAntdModule.forRoot ()], exports: [NgZorroAntdModule]})

3. Root component

Be sure to introduce the nz-root root component; there is and only needs to be referenced once. Some components depend on nz-root, so the best place is in the root component, such as. / src/app.component.html:

At this point, you can safely use ng-zorro-antd components in any page.

II. Best practices

Most of the React versions of the components have been implemented; although they were just released today, they are already in use within Ali.

1. Naming

Ng-zorro-antd is fastidious in naming and has several features:

All components and instructions begin with nz- (example: ng-button).

All component and instruction attributes begin with nz, followed by a large hump naming (example: [nzSize]).

2. Grid

Antd is divided into areas in a grid of 24 equal parts, which may be a little unaccustomed to people who often use bootstrap.

The total number of nz-col cells in a nz-row (the sum of [nzSpan]) is 24, which means one line. If it exceeds it, the line will be wrapped automatically.

Of course, responsive designs like bootstrap are also supported, with several different responses built in.

Size ng-zorro-antdbootstrapauto [nzXs] .col-xs-540px [nzSm] .col-sm-720px [nzMd] .col-md-960px [nzLg] .col-lg-1140px [nzXl] .col-xl-

If you like the flex layout, you need to open it manually:

3. Style

There is no need to refer to any external antd styles, because ng-zorro-antd encapsulates styles in a way that encapsulation: ViewEncapsulation.None is not isolated and can be applied directly anywhere.

For example:

Col-12 col-12

4. Time processing

Angular's default time processing is almost a pain, while ng-zorro-antd relies on moment, so the correct posture for processing time format should be:

_ value | nzDate: 'YYYY-MM-DD ddd'Outpu: 2017-08-15 Tuesday

5. Currency

Is also an Angular pain point, ng-zorro-antd does not provide the corresponding Pipe, there should be follow-up!

Third, if you want to do good work, you must first sharpen its tools.

If you write Angular in vscode, installing ng-zorro-vscode code snippets is very helpful for development efficiency.

Thank you for reading this article carefully. I hope the article "how to use ng-zorro-antd in Angular" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.