Angular 6 Tutorial with Django RESTful API — Adding Angular Material Design 6 UI By Example

In the previous tutorial, you have seen how you can install the Angular CLI 6 and generate a brand new Angular 6 front-end application. In this tutorial, we'll be learning how to use Angular 6 Material Design to build a beautiful and professional grade UI interface.

What's Material Design and Angular Material 6

Material Design is a design language created by Google in 2014 that dictates a set of principles and guidelines for creating UIs including motion (animations) and interaction (gestures).

Angular Material 6 is the implementation of Material Design for Angular 6. It offers a plethora of components and patterns for navigation, forms, buttons and layouts.

In this tutorial, we'll see how to add Material Design to Angular 6 in two ways:

  • The long way: by following a bunch of steps manually. This works for Angular 4, 5 and Angular 6.
  • The short way: by using ng add command to quickly add Angular Material in one step using Angular 6 Schematics. This method only works with Angular 6+.

Step1: Installing Angular Material and Angular CDK

Head over to your terminal, navigate inside your created Angular front-end application and then run the following commands to install Angular Material 6 and Angular 6 CDK

npm install --save @angular/material @angular/cdk

Step 2: Adding Support for Animations

Some Angular Material 6 components use animations so you need to add support for animations in your Angular 6 front-end application in order to enable these animations.

Head back to your terminal and run the following command to install the Angular animations module

npm install --save @angular/animations

Next you only need to add this module to your app configuration so go ahead and open the app.module.ts file then import the BrowserAnimationsModule module and add it to the list of imports

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

imports: [
    BrowserModule, BrowserAnimationsModule
],

Step 3: Adding Support for Gestures with HammerJS

some Angular Material components depend on HammerJS for gestures support so you need to add HammerJS to your application in order to get all the features of those components

You can simply head to your terminal and install the library from npm

npm install --save hammerjs

You'll then need to import the library in your app entry point (main.ts)

/*...*/
import 'hammerjs';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

Step 4: Including a Theme

Themes are required to add styles/colors to Material components used in your application. You can either use a custom or a pre-built theme.

Themes are CSS files. To find all available pre-built themes you can check @angular/material/prebuilt-themes

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

So let's use the deeppurple-amber.css theme for our application.

Simply open the style.css file and add the following CSS @import

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Adding Angular Material 6 with ng-add and Schematics

[With the release of Angular 6 the new ng add command is available which makes it easy to add new capabilities to the project. This command will use the package manager to download new dependencies and invoke corresponding installation scripts. This is making sure that the project is updated with dependencies, configuration changes and that package-specific initialization code is executed.

In the following we’ll use the ng add command to add Angular Material to the previously created Angular 6 application:

$ ng add @angular/material

By executing this command we’re installing Angular Material and the corresponding theming into the project. Furthermore new starter components are registered into ng generate.]

[### Exploring Angular Material Stater Components

With Angular 6 and Angular Material 6, you can now use ng generate to quickly generate Material design components. The following boilerplate components are available:

  • @angular/material:materialDashboard: Generates a card-based Material dashboard component
  • @angular/material:materialTable: Generates a Material data-table component
  • @angular/material:materialNav: Generates a Material navigation component with a responsive sidenav.

You can generate these components using the ng generate command as in the following examples:

$ ng generate @angular/material:materialNav --name exampleNavbar

$ ng generate @angular/material:materialDashboard --name exampleDashboard

$ ng generate @angular/material:materialTable -- name exampleDatatable

These commands generates boilerplate files for the component and update your application module accordingly.

Let's take an example. Go ahead and open src/app/app.component.html and update it to add a Material Design navigation bar:

<example-navbar></example-navbar>

This will include the output of ExampleNavbarComponent in our main application component.

Now, we need to add our links and use the routerLink directive to create navigation links. Open src/app/example-navbar/example-navbar.component.html then add the following links:

<mat-nav-list>      
<a  mat-list-item [routerLink]="'/accounts'"> Accounts </a>
<a  mat-list-item  [routerLink]="'/create-account'"> Create Account </a>
<a  mat-list-item [routerLink]="'/contacts'"> Contacts </a>
<a  class="mat-list-item " [routerLink]="'/create-contact'"> Create Contact </a>
<a  class="mat-list-item " [routerLink]="'/leads'"> Leads </a>
<a  class="mat-list-item " [routerLink]="'/create-lead'"> Create Lead </a>
<a  class="mat-list-item" [routerLink]="'/opportunities'"> Opportunities </a>
<a  class="mat-list-item " [routerLink]="'/create-opportunity'"> Create Opportunity </a>
</mat-nav-list>

Conclusion

That's it, we now have updated our Angular 6 front-end application to use Angular Material and updated our navigation bar to use <mat-nav-list>. In the next tutorial we'll see more detailed example of using Material data-table to create tables for our data.


comments powered by Disqus