guide layout with ng zorro layout

Table of Contents

• NG ZORRO Layout
  • Let’s begin
  • Adding Angular ZORRO library to the project
  • Internationalization
  • Development

NG ZORRO Layout

The purpose of this guide is to get a basic understanding of creating layouts using NG ZORRO in a devon4ng application.

Figure 1. This is what the finished application will look like

Let’s begin

Starts with opening the console(in the Devon distribution folder) and running the following command to start a project named AngularZorroLayout. devon ng new AngularZorroLayout

• devon ng new AngularZorroLayout

Select y when it asks whether it would like to add Angular routing and select scss when it asks for the style sheet format.

Once the creation process is complete, open your newly created application in Visual Studio Code. Try running the empty application by running the following command in the integrated terminal:

• devon ng serve

Angular will spin up a server and you can check your application by visiting http://localhost:4200/ in your browser.

Adding Angular ZORRO library to the project

Blank application

Next we will add Angular Material to our application. In the integrated terminal, press CTRL + C to terminate the running application and run the following command:

• ng add ng-zorro-antd

Figure 2. CLI Angular ZORRO Layout

Or if we would like to customize our workflow we can install it with:

• npm install ng-zorro-antd

After run that command, need to import the pre-build styles in angular.json

Listing 1. Styles on angular.json

"styles": [
    "src/styles.scss",
    "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
    "node_modules/ng-zorro-antd/resizable/style/index.min.css"
],

Once the dependencies are installed, need to import the BrowserAnimationsModule in our AppModule for animations support.

Listing 2. Importing BrowserAnimationsModule in AppModule

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class AppModule { }

Internationalization

The default language of ng-zorro-antd is Chinese . If you want to use other languages, you can follow the instructions below. You can also set the language with ng add ng-zorro-antd when creating project.

ng-zorro-antd provides several configuration tokens for global configuration of international copy and date, NZ_I18N for international copy.

Listing 3. Importing Configuration in App.module

import { NZ_I18N, en_US } from 'ng-zorro-antd/i18n';

@NgModule({
  ...
  providers: [
    { provide: NZ_I18N, useValue: en_US },
  ...
})
export class AppModule { }

To finish the configuration, we need to import the icons from the Library.

Listing 4. Importing Icons in App.module

import * as AllIcons from '@ant-design/icons-angular/icons';

const antDesignIcons = AllIcons as {
  [key: string]: IconDefinition;
};
const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key]);

Development

We have all the NG ZORRO related dependencies set up in our project, we can start coding.

Listing 5. Adding styles in styles.css

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, sans-serif;
}

Next step is to create a component for the header. We will create it with the next command. We will create a folder component to have a good practices.

ng generate component components/header

In this component, we are going to create the menu.

First, we need to import the menu module on app.module.

Listing 6. Adding module in app.module

import { NzMenuModule } from 'ng-zorro-antd/menu';

And we will create the header with this code:

<ul nz-menu nzMode="horizontal" class="container">
  <li nz-menu-item nzSelected>
    <i nz-icon nzType="mail"></i>
    Navigation One
  </li>
  <li nz-menu-item nzDisabled>
    <i nz-icon nzType="appstore"></i>
    Navigation Two
  </li>
  <li nz-submenu nzTitle="Navigation Three - Submenu" nzIcon="setting">
    <ul>
      <li nz-menu-group nzTitle="Modals">
        <ul>
             <li nz-menu-item nz-button (click)="info()"> Info</li>
               <li nz-menu-item nz-button (click)="success()">Success</li>
             <li nz-menu-item nz-button (click)="error()">Error</li>
             <li nz-menu-item nz-button (click)="warning()">Warning</li>
        </ul>
      </li>
      <li nz-menu-group nzTitle="Item 2">
        <ul>
          <li nz-menu-item>Option 3</li>
          <li nz-submenu nzTitle="Sub Menu">
            <ul>
              <li nz-menu-item nzDisabled>Option 4</li>
              <li nz-menu-item>Option 5</li>
            </ul>
          </li>
          <li nz-submenu nzDisabled nzTitle="Disabled Sub Menu">
            <ul>
              <li nz-menu-item>Option 6</li>
              <li nz-menu-item>Option 7</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li nz-menu-item>
    <a href="https://ng.ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
  </li>
</ul>

Figure 3. Header component

Note The menu has some properties like nzTitle, nzButton, nzDisabled or nzSelected.

And modify the styles on header.component.scss

Listing 7. Adding styles on header.scss

.container{
  margin: auto;
  text-align: center;
}

The library has enough styles and we don’t need to change to much. We’ll be like:

Figure 4. Header Component

In the menu, we added an example of a modal

To use it we need to import that module on app.module.ts

import { NzModalModule } from 'ng-zorro-antd/modal';

In the HTML file we just need to create a method on (click) to call the modal.

<li nz-submenu nzTitle="Navigation Three - Submenu" nzIcon="setting">
  <ul>
    <li nz-menu-group nzTitle="Modals">
      <ul>
           <li nz-menu-item nz-button (click)="info()"> Info</li>
             <li nz-menu-item nz-button (click)="success()">Success</li>
           <li nz-menu-item nz-button (click)="error()">Error</li>
           <li nz-menu-item nz-button (click)="warning()">Warning</li>
      </ul>
    </li>

Figure 5. Modal

And now, we just need to create those methods in the file header.component.ts Also, need to import the modal service and we use it in the constructor of the class.

import {NzModalService} from 'ng-zorro-antd/modal'; constructor(private modal: NzModalService){}

Figure 6. Import ModalService from ZORRO

info(): void {
  this.modal.info({
    nzTitle: 'This is a notification message',
    nzContent: '<p>some messages...some messages...</p><p>some messages...some messages...</p>',
    nzOnOk: () => console.log('Info OK')
  });
}

success(): void {
  this.modal.success({
    nzTitle: 'This is a success message',
    nzContent: 'some messages...some messages...'
  });
}

error(): void {
  this.modal.error({
    nzTitle: 'This is an error message',
    nzContent: 'some messages...some messages...'
  });
}

warning(): void {
  this.modal.warning({
    nzTitle: 'This is an warning message',
    nzContent: 'some messages...some messages...'
  });
}

Figure 7. Logic on ts file looks like

Once the header is done, time to create the main component. In this case will be those elements.

Figure 8. Main Component

The first element that we can see, it’s a carousel. To implement it on the code, we just need to do the same that we done before, import the module and import the component. Do we import the next module on app.module

Listing 8. Import carousel Module

import { NzCarouselModule } from 'ng-zorro-antd/carousel';

And use the label “nz-carousel” to create the Carousel, it has some attributes coming from the library.

Figure 9. Import ModalService from ZORRO

**NOTE The loop that we are doing its how many images we will have. And finally, we will give some styles.

.container{
  margin: auto;
  text-align: center;
  margin-top: 20px;
}
[nz-carousel-content] {
        text-align: center;
        height: 160px;
        line-height: 160px;
        background: #364d79;
        color: #fff;
        overflow: hidden;
      }

      h3 {
        color: #fff;
        margin-bottom: 0;
      }

nz-content{
  padding: 0 30px 0 30px;
}

Figure 10. Styling

Next element, the cards

Figure 11. Cards1

Figure 12. Cards Unlocked

We will have a button to activate or deactivate the cards. To do it, we will write the next code in our file html.

      <div nz-row>
        <div nz-col [nzXs]="{ span: 5, offset: 1 }" [nzLg]="{ span: 6, offset: 2 }">
          <nz-card nzXs="8">
            <nz-skeleton [nzActive]="true" [nzLoading]="loading" [nzAvatar]="{ size: 'large' }">
              <nz-card-meta [nzAvatar]="avatarTemplate" nzTitle="Card title" nzDescription="This is the description">
              </nz-card-meta>
            </nz-skeleton>
          </nz-card>
        </div>
        <div nz-col [nzXs]="{ span: 11, offset: 1 }" [nzLg]="{ span: 6, offset: 2 }">
          <nz-card nzXs="8">
            <nz-skeleton [nzActive]="true" [nzLoading]="!loading" [nzAvatar]="{ size: 'small' }">
              <nz-card-meta [nzAvatar]="avatarTemplate" nzTitle="Card title" nzDescription="This is the description">
              </nz-card-meta>
            </nz-skeleton>
          </nz-card>
        </div>
        <div nz-col [nzXs]="{ span: 5, offset: 1 }" [nzLg]="{ span: 6, offset: 2 }">
          <nz-card nzXs="8">
            <nz-skeleton [nzActive]="true" [nzLoading]="loading" [nzAvatar]="{ size: 'large' }">
              <nz-card-meta [nzAvatar]="avatarTemplate" nzTitle="Card title" nzDescription="This is the description">
              </nz-card-meta>
            </nz-skeleton>
          </nz-card>
        </div>
      </div>

.Cards HTML image::images/angular-zorro-layout/figure14.png[]

The first thing that we can see, it’s a button to switch between see it or not. So,first thing, we need to import that switch.

import { NzSwitchModule } from 'ng-zorro-antd/switch';

Next step, that we need to do its write the `HTML code. It’s simple:

<nz-switch [(ngModel)]="loading"></nz-switch>

So now, in the ts file we just need to create a Boolean variable. With the ngModel and the switch, each time that we will click on the button the variable will swap between true or false. After create the button, we are going to create the card.

Need to import the following module on app.module import { NzCardModule } from 'ng-zorro-antd/card'; And after that we need to write the HTML code

Figure 13. Cards Logic

We will find a lot of attributes. We can find their explication in the api: NG ZORRO

Last Element, the table

Figure 14. Table

We need to import the module import { NzTableModule } from 'ng-zorro-antd/table';

After that we can see a button, this is just to create a new row in the table. The button only has a method to add a new value to our array

Table Interface

interface ItemData {
  id: string;
  name: string;
  age: string;
  address: string;
}

Figure 15. Table Interface

Add Row Method

addRow(): void {
  this.listOfData = [
    ...this.listOfData,
    {
      id: `${this.i}`,
      name: `Edward King ${this.i}`,
      age: '32',
      address: `London, Park Lane no. ${this.i}`
    }
  ];
  this.i++;
}

Figure 16. Add Method

After that we need to create the table

<nz-table #editRowTable nzBordered [nzData]="listOfData">
          <thead>
            <tr>
              <th nzWidth="30%">Name</th>
              <th>Age</th>
              <th>Address</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of editRowTable.data" class="editable-row">
              <td>
                <div class="editable-cell" [hidden]="editId === data.id" (click)="startEdit(data.id)">
                  {{ data.name }}
                </div>
                <input [hidden]="editId !== data.id" type="text" nz-input [(ngModel)]="data.name" (blur)="stopEdit()" />
              </td>
              <td>{{ data.age }}</td>
              <td>{{ data.address }}</td>
              <td>
                <a nz-popconfirm nzPopconfirmTitle="Sure to delete?" (nzOnConfirm)="deleteRow(data.id)">Delete</a>
              </td>
            </tr>
          </tbody>
        </nz-table>

.Table HTML Logic image::images/angular-zorro-layout/figure19.png[]

To create the table we need to use the tag <nz-table> and after that is like a Html table, with the <thead> and <tbody>

How it shows with the for, we are showing the data from the array created before. In the first cell we can see, that we have a method to edit the value.

Figure 17. Table methods

Figure 18. Table