Getting Started With Angular Material

In this article, we are going to show you how to prepare our Angular project and how to install Angular Material in a few simple steps. But first things first. Before we start with the Angular Material features, we need to create the project first.

So let’s dive right into it.

This article is part of the series

For the complete navigation and all the basic instructions of the Angular Material series, check out: Introduction of the Angular Material series.

The source code is available at GitHub Getting Started With Angular Material – Source Code

We are going to divide this post into several sections:

Project Creation
Angular Material Installation
Creating Material Module
Creating the Layout Component
- Angular Flex Layout
Creating Home Component and Using Material Tabs
Additional Mat-Tab Features
Conclusion

Project Creation

We are going to use Angular CLI through the entire project (and we strongly advise you to do the same), thus creating our project is no exception to that. So, let’s open a command prompt window and create our Angular project:

ng new ang-material-owneraccount

We don’t want Angular to create the routing and we are going to select the CSS for the stylesheet format.

Once the creation is done, we are going to start the Visual Studio Code editor and open our project.

Angular Material Installation

We are going to use the ng add command to install the required packages. Besides installing Angular Material, we need to have CDK and Animations as well.

So, let’s open the Terminal window in VS Code and execute the command:

ng add @angular/material

To continue, let’s include the prebuild theme for Angular Material. The theme is required and we can choose one of the available pre-built themes:

deeppurple-amber.css
indigo-pink.css
pink-blugrey.css
purple-green.css

We are going to select the Indigo/Pink. Additionally, we are not going to use global AngularMaterial typography styles and we are going to use the Angular Material Animations.

After the installation finishes, we should see this result:

Now, we can inspect the app.module.ts file and verify that the BrowserAnimationsModule is imported there:

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The next step is to install the hammerjs library for gesture support. In order to have a full feature of some components, we need to install it:

npm install --save hammerjs

hammerjs - angular material installation

After the installation, we are going to import it as a first-line in the maint.ts file:

import 'hammerjs';

We are going to use Material Icons in our project and we can check the index.html file, to verify it is imported during the installation:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngMaterialOwnerAccount</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Creating Material Module

Even though we can import all the required components into the app.module.ts file, this is not recommended. A better solution is to create a separate module with all the required material imports and then import that module into the app.module.ts file. That being said, let’s do it:

ng g module material --module app

This command will create a new folder material with the material.module.ts file inside. But this file is missing one thing and that’s the exports array. So, let’s add it:

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

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    
  ],
  declarations: []
})
export class MaterialModule { }

Finally, we can check that this module is imported in the app.module.ts file:

import { MaterialModule } from './material/material.module';

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule
  ],

That is it. We have prepared everything we need to use the Material components. Without further ado, we are going to start using them.

Creating the Layout Component

This component is going to be an entry point for our entire application, so let’s create it and import its selector inside the app.component.ts file:

ng g component layout --skipTests

This command will create our component files and import them into the app.module.ts file.

Angular Flex Layout

Before we modify the HTML component file, we need to install one more library: @angular/flex-layout. This library will help us create a responsive application. So, let’s install it:

npm install @angular/flex-layout --save

angular flex - angular material installation

And we need to register it inside the app.module.ts file:

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

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule
  ],

Now, we can modify our layout.component.html file:

<div fxLayout="row wrap" fxLayoutAlign="center center" class="layout-wrapper">
  <div fxFlex="80%" fxFlex.lt-md="100%" class="flex-wrapper">
      <ng-content></ng-content>
  </div>
</div>

As you can see, we use some angular/flex directives to create a responsive wrapper around our content. With the fxLayout element, we define the flow order of the child elements inside the container. The fxLayoutAlign will position children according to both the main-axis and the cross-axis.

The fxFlex element resizes the child element to 80% of its parent, and if the screen goes below the medium than the child will take 100% of its parent. If you want to read more about flex-layout, you can find plenty of material here: Flex-Layout-Documentation.

With the <ng-content> element, we are using angular content projection.

We have two more classes: layout-wrapper and flex-wrapper, so let’s implement them inside the layout.component.css file:

.layout-wrapper{
    height: 100%;
}

.flex-wrapper{
    height: 100%;
}

Excellent.

All we have to do is to remove all the content from the app.component.html file and introduce this component by using its selector:

<app-layout>
  Application works.
</app-layout>

We can start our application by typing ng serve and see that the application actually works.

Creating Home Component and Using Material Tabs

Let’s create the Home component file structure first:

ng g component home --skipTests

Now, let’s modify the home.component.html file:

<section fxLayout="column" fxFlexAlign="stretch">
  <div fxFlexAlign="center">
    <p>Welcome to the Material Angular OwnerAccount Application</p>
  </div>

  <p>In this application we are going to work with:</p>
</section>

We need to modify the app.component.html file:

<app-layout>
  <app-home></app-home>
</app-layout>

And we need to modify the home.component.css file as well:

section div p{
    color: #3f51b5;
    font-size: 30px;
    text-shadow: 2px 3px 5px grey;
    margin: 30px 0;
}

section div + p{
    color: #3f51b5;
    font-weight: bold;
    font-size: 20px;
    padding-bottom: 20px;
}

To use our first material component, the mat-tab component, we need to register it inside the material.module.ts file:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatTabsModule } from '@angular/material/tabs';

@NgModule({
  imports: [
    CommonModule,
    MatTabsModule
  ],
  exports: [
    MatTabsModule
  ],
  declarations: []
})
export class MaterialModule { }

And then to modify the home.component.html file:

<section fxLayout="column" fxFlexAlign="stretch">
  <div fxFlexAlign="center">
    <p>Welcome to the Material Angular OwnerAccount Application</p>
  </div>

  <p>In this application we are going to work with:</p>

  <mat-tab-group>
    <mat-tab label="Material Components"> 
      <p>We are going to use different material components to create nice looking angular app.</p> 
    </mat-tab>
    <mat-tab label="Consume .NET Core Web API">
       <p>We will consume our .NET Core application. Basically, we will create complete CRUD client app.</p>
      </mat-tab>
    <mat-tab label="Fully responsive navigation menu">
       <p>By using material components, we are going to create fully responsive navigation menu, with its side-bar as well.</p>
      </mat-tab>
  </mat-tab-group>
</section>

Now, we can inspect our result:

Additional Mat-Tab Features

First of all, let’s style our tab content a little bit more, to center our text inside every tab:

mat-tab-group {
    text-align: center;
}

mat-tab-group p {
    padding-top: 20px;
}

This control has its own events. The selectedTabChange event is emitted when the active tab changes. The focusChange event is emitted when the user navigates through tabs with keyboard navigation.

So, let’s use the selectedTabChange event:

<mat-tab-group (selectedTabChange)="executeSelectedChange($event)">

And we need to modify the home.component.ts file:

public executeSelectedChange = (event) => {
    console.log(event);
  }

Right now, as soon as we switch our tabs, we will see the event object logged into the console window:

Conclusion

Everything looks great. We have our first material component and in the following articles, we are going to work with other material components as well.

In this article we have learned:

How to prepare the Angular project,
How to install Angular Material, CDK, and Animations
The way to install and use the @angular/flex-layout library
How to work with the Tab Material component

In the next article, we are going to learn more about creating a navigation menu and menu side-bar with Angular routing.