Mastering Angular UI: Unlocking the Power of Ng Zorro

Introduction

A strong and well-liked JavaScript|TypeScript framework for creating web apps is called Angular. It offers a wide range of tools and capabilities and adheres to the component-based design. Single-page applications (SPAs) that are dynamic and responsive and provide a smooth user experience can be made with Angular. It enables dependency injection and two-way data binding and provides extensive routing and testing capabilities. Google maintains Angular, and a thriving community actively participates in its growth and support.

Ng-Zorro

A complete library of UI components for Angular apps is called NgZorro. It includes a large selection of pre-built elements that can be quickly integrated into your project, such as buttons, forms, modals, tables, and more. NgZorro gives your application a unified and professional appearance by adhering to contemporary design concepts. Additionally, it has more sophisticated features like support for internationalisation (i18n) and improvements to accessibility. A popular option for Angular developers, NgZorro is regularly maintained, well-documented, and supported by a thriving community.

Table of contents

1.Installing Angular CLI in local environment
2.Creating new project with Angular
3.Installing ng-zorro-antd
4.Creating a separate module for importing components
5.Serving the project

1.Installing Angular CLI in local environment

During development, there are a number of engineering requirements, such as compiling, debugging, proxying, and packaging TypeScript code. We strongly advise you to use the Angular official CLI @angular/cli to develop your project. Here is a little example to make my point clear.

$ npm install -g @angular/cli
# Or if you use yarn
$ yarn global add @angular/cli

From the above line of code,we install angular CLI which helps to run any Angular application in the local environment.

2.Creating new project with Angular

The following command enables @angular/cli to build a PROJECT-NAME folder with all necessary dependencies within the current directory.

$ ng new PROJECT-NAME

@angular/cli will run npm install or yarn after a project is created. You can run npm install or yarn by yourself if it fails

3.Installing ng-zorro-antd

After changing the directory to the newly created project, you can automatically run the following commands to initialize the project's configuration, including importing i18n files and stylesheets and loading initial modules.

$ cd PROJECT-NAME
$ ng add ng-zorro-antd

Now Ant-design is initialised to the project.The Folder structure of the project look like the following picture.

4.Creating a separate module for importing components

Create a separate file inside the App folder called NgZorro.module.ts

NgZorro.module.ts

import { NgModule } from '@angular/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzButtonModule } from 'ng-zorro-antd/button';

@NgModule({
  exports: [
    NzIconModule,
    NzButtonModule,
  ],
})
export class NgZorroModule {}

In the above file, we can import whatever components from the NgZorro module using the official documentation
The separate file is created for organising the folder structure.
Next the above declared module must be imported in the app.module.ts file for using it in the template files and its child component templates.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { NZ_I18N } from 'ng-zorro-antd/i18n';
import { en_US } from 'ng-zorro-antd/i18n';
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { NgZorroModule } from './ngZorro.module';

registerLocaleData(en);

@NgModule({
  declarations: [AppComponent],
  imports: [
    NgZorroModule,
    BrowserModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
  ],
  providers: [{ provide: NZ_I18N, useValue: en_US }],
  bootstrap: [AppComponent],
})
export class AppModule {}

The NgZorro components are now ready to use it in the templates.
Let's take an example of creating a button.

app.component.html

<!-- NG-ZORRO -->
<button nz-button nzType="primary">Primary Button</button>
<button nz-button nzType="default">Default Button</button>
<button nz-button nzType="dashed">Dashed Button</button>
<button nz-button nzType="text">Text Button</button>
<a nz-button nzType="link">Link Button</a>

5.Serving the project

Your project is now ready to run. After running the following command, a welcome page will be displayed in your browser.

# Either you use the command
$ng serve
#or
$npm start

By default, the project will be opened in the url

http://localhost:4200

Now you have successfully added NgZorro to Angular project.
Now you work on projects in lightning speed having reference with the offical documentation.
I hope this post helps you integrating NgZorro with Angular.
Subscribe to my account for getting more useful information like this.
Happy coding...😉

Comments

[Suresh Hariharan]

Great explanation with examples..! 👏🏽