Image for post
Image for post

Angular Material And Angular 6 — Material Design For Angular

This post has been published first on CodingTheSmartWay.com.

Subscribe On YouTube | Live Demo | Code on GitHub

Angular Material is a collection of Material Design components for Angular. By using these components you can apply Material Design very easily. With the release of Angular 6 the usage of Angular Material has become easier as well. In this tutorial we’ll take a look at the recent changes. You’ll learn how to use Angular Material in your Angular 6 project in the most easy way.

The Angular Material website can be found at https://material.angular.io/.

Image for post
Image for post

Setting Up The Angular 6 Project

To get starte we first need to setup the Angular 6 project. This is done by using Angular CLI (https://cli.angular.io/). If you have not installed Angular CLI on your system yet you first need to follow the steps from the project’s website to make the command line interface available on your system.

Once Angular CLI has been installed successfully you can initiate the new project by using the ng command in the following way:

In this example ngMat01 is the name of the new project. A new project folder (with that name) is created, the Angular project template is downloaded and the needed dependencies are installed.

Using ng add To Add Angular Material

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:

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

Having added new Angular Material starter components to ng generate makes it very easy to get started with Angular Material. The following starter components are available:

  • @angular/material:materialDashboard: Create a card-based dashboard component
  • @angular/material:materialTable: Create a component that displays data with a data-table
  • @angular/material:materialNav: Create a component with a responsive sidenav for navigation

To make use of those starter components you need to use the ng generate command in the following ways:

$ ng generate @angular/material:materialNav --name myNav
$ ng generate @angular/material:materialDashboard --name myDashboard
$ ng generate @angular/material:materialTable -- name myTable

E.g. if you use the first command to generate a new myNav component you should be able to see the following output on the command line:

CREATE src/app/my-nav/my-nav.component.css (110 bytes)
CREATE src/app/my-nav/my-nav.component.html (945 bytes)
CREATE src/app/my-nav/my-nav.component.spec.ts (605 bytes)
CREATE src/app/my-nav/my-nav.component.ts (481 bytes)
UPDATE src/app/app.module.ts (795 bytes)

Four new files have been added to the project. Those files contain the implementation of the Angular Material navigation component. MyNavComponent has been added to the declarations array of the @NgModule decorator in AppModule, so that the component can be used in our Angular application.

To make it visible to the user delete the default content of file app.component.html and just insert the following element:

This is the element which is used to include the output of MyNavComponent in the output which is presented in the browser.

Having started the development web server with

you should be able to see the following result:

Image for post
Image for post

Adding The Router

Now that the navigation layout is available we’re able to add Angular Router functionality easily. In app.module.ts add the following import statement to import RouterModule and Routes:

import { RouterModule, Routes } from '@angular/router';

Next add a router configuration array in the same file:

const appRoutes: Routes = [
{ path: 'first-page', component: FirstPageComponent },
{ path: 'second-page', component: SecondPageComponent },
{ path: 'third-page', component: ThirdPageComponent }
];

Of course, FirstPageComponent, SecondPageComponent, and ThirdPageComponent are not available yet. We’re going to add those components in the following steps.

In order to activate the router configuration for our Angular application we need to make sure to add RouterModule to the imports-Array of the @NgModule in the following way:

imports: [
...
RouterModule.forRoot(appRoutes),
...
],

Next we need to add the router outlet (the place where the content of the route component is inserted) inside the <mat-sidenav-content>-Element in file my-nav.component.html:

<router-outlet></router-outlet>

Furthermore we need to update the links from the sidebar menu and use the routerLink directive to point to the respective routes:

<mat-nav-list>
<a mat-list-item routerLink="/first-page">First Page</a>
<a mat-list-item routerLink="/second-page">Second Page</a>
<a mat-list-item routerLink="/third-page">Third Page</a>
</mat-nav-list>

Finally, to make the router configuration work, add the three components by using the following commands:



Using Other Angular Material Components

We’ve used the navigation starter component in our application so far. You can also make use of any of the other Angular Material components. To get an overview of available components take look at https://material.angular.io/components/categories.

In the next step we’re going to use the MatCard component from the Angular Material library in one of our page components (e.g. FirstPageComponent).

First add the MatCardModule import in file app.module.ts:

import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule, MatCardModule } from '@angular/material';

Add it to the imports-Array as well:

imports: [
BrowserModule,
BrowserAnimationsModule,
LayoutModule,
RouterModule.forRoot(appRoutes),
MatToolbarModule,
MatButtonModule,
MatSidenavModule,
MatIconModule,
MatListModule,
MatCardModule
],

Now we’re ready to use components of MatCardModule in the template code (e.g. first-page.component.html):

<mat-card class="example-card">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>Shiba Inu</mat-card-title>
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>

Insert the CSS code in first-page.component.css as well:

.example-card {
max-width: 400px;
}
.example-header-image {
background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');
background-size: cover;
}

All other Material Design components from the Angular Material library can be used in the same way.

This post has been published first on CodingTheSmartWay.com.

#1 Angular 6 — The Complete Guide

Master Angular (Angular 2+, incl. Angular 6) and build awesome, reactive web apps with the successor of Angular.js
Go To Course …

Disclaimer: This post contains affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support this blog!

CodingTheSmartWay.com Blog

CodingTheSmartWay.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store