NG-ZORRO-MOBILE – A Mobile UI Components

Today we are take a short look at NG-ZORRO-MOBILE, it is an enterprise-class UI design for Angular mobile web app. You can use this UI in any kind of product because it is scalable & easily adaptable. It Provides the “Components are loaded on demand” / “Web page HD display” / “SVG Icon” optimisation features and integrated development. It also support to running in ionic.

Environment Support:

iOS 7.0+
Android 4.4+

Angular Support:

Angular 6.0.0^.

Installation:

NG-ZORRO-MOBILE recommended to use @angular/cli to install.

$ npm install -g @angular/cli

Create Project using following command:

$ ng new PROJECT-NAME

Initialize Configuration:

$ ng add ng-zorro-antd-mobile

Development and Debugging:

$ ng serve --port 0 --open

Build and Deploy:

$ ng build --prod

Add Modules and Styles to your angular app:

import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile';
...
...
...
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ...
    ...
    ...
    NgZorroAntdMobileModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

and add styles to your angular.json file

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

Done! now you can use ng-zorro-mobile for your angular mobile app. You also used in ionic. For using in ionic please check following link.

used in ionic:  http://ng.mobile.ant.design/#/docs/running-in-ionic/zh

Some other links are following:

NG-ZORRO-MOBILE : http://ng.mobile.ant.design