Mastering Angular UI: Unlocking the Power of Ng Zorro

Priyadharshan senthil — Fri, 16 Jun 2023 04:05:11 +0000

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.

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...😉

Structural Directives:

Priyadharshan senthil — Thu, 15 Jun 2023 17:42:42 +0000

Structural Directives:

ngIf: It is used to conditionally renders or removes an element based on a given expression.

Example:

<div *ngIf="isLoggedIn">Welcome, {{ username }}!</div>

The above div tag is rendered if and only if the value of the variable isLoggedIn turns to be True.
Likewise,For React developers reference,In React we use useState hook to do the same conditional rendering.

2.ngFor:
Renders a template for each item in a collection. In Angular, the ngFor structural directive is used to render a template for each item in a collection by iterating through collections (arrays or objects).It is very similar to for loop in programming language.

Example :


  <ul>
     <li *ngFor="let item of items">{{ item }}</li>
  </ul>

In the above example, the items is the array or object which contains the list of values to be rendered say bunch of students.The variable item is used to iterate the loop , it is also called the loop variable.
This directive is used when we have a dynamic data instead of typing multiple statements.

3.ngSwitch:
In Angular ,ngSwitch is used to switch between multiple templates based on the value of the condition expression.

Here's a breakdown of how it works:


  <div [ngSwitch]="condition">
     <p *ngSwitchCase="'A'">Option A</p>
     <p *ngSwitchCase="'B'">Option B</p>
     <p *ngSwitchDefault>Default Option</p>
  </div>

Binds the component's condition value to the ngSwitch directive using the syntax [ngSwitch]="condition". Which template within the ngSwitch block should be displayed depends on the value of condition.
ngSwitchCase="'A'":

When the condition's value matches the case value provided (in this case, "A"), the *ngSwitchCase directive defines a template to be displayed. The p> element containing the text "Option A" will be rendered if condition equals "A."

ngSwitchCase="'B'":

This *ngSwitchCase directive defines a template to be displayed when the value of the condition matches the case value ('B'), similar to the previous case. The p> element containing the text "Option B" will be rendered if condition equals "B".

When none of the ngSwitchCase values match the value of condition, the *ngSwitchDefault directive is used to specify a default template that will be displayed. The element with the text "Default Option" will be shown if condition matches no situations.
The "Option A", "Option B", or "Default Option" will be displayed in this example depending on the value of the condition.

This gives flexibility in presenting content based on criteria and enables dynamic rendering of various templates based on the value of a variable or expression.
There are more angular directives like
1.Attributes directives
2.Custom directives
We will see about these topics in the next post.
Happy coding...😉

DEV Community: Priyadharshan senthil

Mastering Angular UI: Unlocking the Power of Ng Zorro

Introduction

Ng-Zorro

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

Structural Directives:

Structural Directives: