How to install Angular material and Angular Flex-box for Angular 6

This guide will lead you step by step to install Angular Material and Angular Flex-box with Angular 6.

Angular Material

Material Design components for Angular

Introduction

What is Material Design?

Material Design is Googles UI design philosophy. It is inspired by the world of paper and ink with a three-dimensional space.  It gives its interfaces a reassuring sense of depth and structure.

More information about Material Design: https://material.io/

Why would you use Angular Material Design?

Angular Material is a UI Component framework implementation of Google’s Material Design Specification.

There are several reasons why you should (could) use Angular Material Design.

  • It looks good right out of the box.
  • Many ready components to work with.
  • Your apps will have the familiar look and feel of Google apps and many other apps
  • It is easy to change the look of your app with different (custom) themes.
  • It integrates well with Angular and is supported by Google.

The possibility of making themes is actually a nice feature that could be very handy when you want to offer your users to switch the look of your app. For example a light and dark theme.

Angular Flex-Layout

Angular Material does not have a grid system, like Bootstrap has. But there is Angular Flex-Layout which provides you with the next generation grid layout. Flex-Layout is making use of CSS Flexbox.

Let’s get started

Make sure you have the latest Angular 6 CLI

To make sure everything works, you need to have the latest Angular 6 CLI, the older versions had some bugs with adding material.

In your command line console run the following command to update your Angular 6 CLI globally to the latest version:

npm install -g @angular/cli

Update existing Angular 6 projects (Optional)

If you have already an Angular 6 project and you run into troubles adding Angular Material, update the angular/cli inside of your project.

In your command line console, goto the directory of your project and execute:

ng update @angular/cli

Let’s get started with a new Angular 6 project

We start by making a new Angular 6 project.

Fire up your favorite command line console and go ahead creating a new angular 6 project.

ng new angular6-material

Change to the newly created project:

cd angular6-material

Install Angular Material

Again in your command line console execute the following command to let the CLI install and setup Angular Material.

ng add @angular/material

Let’s examine the changes made by the CLI

Let’s examine the changes made by the CLI. To study what the CLI did for us, teaches us how to do the same manually.

The results after running the command above are:

Installed packages for tooling via npm.
UPDATE package.json (1386 bytes)
UPDATE angular.json (3893 bytes)
UPDATE src/app/app.module.ts (423 bytes)
UPDATE src/index.html (480 bytes)
UPDATE src/styles.css (165 bytes)

We will examine these file, one by one.

package.json

After installing you will see the following changes in package.json:

The CLI added @angular/material and @angular/cdk to the package.json file.

angular.json

In angular.json the material theme indigo-pink is added to the styles section. In fact it is added two time. Under the “builder” node and under the “test” node.

The available pre-built themes are:

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

Go ahead and choose the theme you like most. Remember to change the theme in two places in the angular.json file.

In a future blog post I will explain how you can make your own custom theme.

src/app/app.module.ts

Here we see that the BrowserAnimationsModule is imported in the app module.

src/index.html

In the index.html file we see that it added two stylesheets links:

  • Material Icons
  • Roboto font

src/styles.css

In the styles.css we see that it added a simple CSS reset to the html body. And it set’s the font to Roboto.

Open the styles.css file and after the body element, add this simple container rule set that we use to style our page.

.container {

  padding: 20px 40px;

 }

Install Angular Flex-Layout

Now let’s continue and install Angular Flex-Layout. In your command line console executed:

npm i @angular/flex-layout --save

Open app.module.ts and import the FlexLayout Module.

src/app.module.ts

import { FlexLayoutModule } from '@angular/flex-layout';

imports: [

...

  FlexLayoutModule,

],

The app.module.ts will looks like this:

Create a material module

To start using the material components you need to import them into your project. Only import the components that you use. Importing all components would increase the size of your project unnecessary. To keep this central, we import all components in one module.

Create a module to import the material components you are going to use in your project with the following command.

ng g m material --flat -m app

Notes:

–flat option is to instruct not to make a folder.
-m app option is to instruct that the module needs to be imported in the app.module.ts file.

  • Open the newly created file material.ts
  • Remove CommonModule from the module.
  • Import and export the material modules you want to use.

As an example you add the Button and Icon Module, these you will need in almost all projects.

Just copy/paste the following code into the material.ts file.

import { NgModule } from '@angular/core';

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule} from '@angular/material/icon';

@NgModule({
  imports: [
    MatButtonModule,
    MatIconModule,
  ],
  exports: [
    MatButtonModule,
    MatIconModule,
  ],
  declarations: []
})

export class MaterialModule { }

When adding new material modules pay attention to the following:

  • Import always the Module component MatButtonModule (and not MatButton).
  • Import and export the material modules, this way it is available in all components.

Note: to use Material Icons you need to import the Icon Module!

Testing Angular Material and Angular Flex-box

To test if all is working well, open app.component.html and replace the contents with the following and save the file.

<div class="container">
 <h1>
 Welcome to the Material World!
 </h1>

<h2>Material buttons</h2>
 <div fxLayout="row" fxLayoutGap="16px">
 <button mat-raised-button>Basic</button>
 <button mat-raised-button color="primary">Primary</button>
 <button mat-raised-button color="accent">Accent</button>
 <button mat-raised-button color="warn">Warn</button>
 <button mat-raised-button disabled>Disabled</button>
 <a mat-raised-button routerLink=".">Link</a>
 </div>

<h2>Material Icons</h2>
 <div fxLayout="row" fxLayoutGap="16px">
 <mat-icon>home</mat-icon>
 <mat-icon color="primary">cake</mat-icon>
 <mat-icon color="accent">beach_access</mat-icon>
 <mat-icon color="warn">whatshot</mat-icon>
 </div>
</div>

If you did not already, fire up the project with the command:

ng serve --open

Your project should look like this:

Does your page looks like this? Well done, you made it!

If not, compare your code with the source code here: https://github.com/baswanders/angular6-material.

More information

Angular Material components
https://material.angular.io/components/categories

Angular Flex-Layout
https://github.com/angular/flex-layout/wiki/API-Documentation

Material Icons
https://material.io/tools/icons/

Angular CLI schematics
https://material.angular.io/guide/schematics

Share

Leave a Comment