Angular 7 Material Basics

Go back to Tutorial

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 7 the usage of Angular Material has become easier as well.

Material Design

Material Design is a design language for web and mobile apps which was developed by Google in 2014. Material Design makes it easy for developers to customize their UI while still keeping a good-looking app interface that users are comfortable with.

Material design is a design language introduced by Google in the summer of 2014 for Android’s new OS. Although its initial focus was touch-based mobile apps, now its functionality has been extended to reach the web design world.

It’s an adaptable system of guidelines, components, and tools that support the best practices of user interface design. It’s also backed by open-source code and supported by a large community of designers and developers who are collaborating together to build beautiful products.

Material Design defines the qualities that can be expressed by UI regions, surfaces, and components. Design and strategize how your app is built using foundations that address design from both a broad and detailed perspective.

Introduction to Angular Material

Angular Material consists of a suite of pre-built Angular components. Unlike Bootstrap, which gives you components that you can style any way you want, Angular Material strives to provide an enhanced and consistent user experience. At the same time, it gives you the ability to control how different components behave.

Just like Angular, Angular Material has evolved a lot since its initial release, with great improvements and bug fixes.

Installation

Step 1: Install Angular Material, Angular CDK and Angular Animations – You can use either the npm or yarn command-line tool to install packages. Use whichever is appropriate for your project in the examples below.

npm install –save @angular/material @angular/cdk @angular/animations

Using Angular Devkit 6+ – Using the Angular CLI ng add command will update your Angular project with the correct dependencies, perform configuration changes and execute initialization code.

ng add @angular/material

Step 2: Configure animations – Once the animations package is installed, import BrowserAnimationsModule into your application to enable animations support.

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

@NgModule({

…

imports: [BrowserAnimationsModule],

…

})

export class PizzaPartyAppModule { }

Alternatively, you can disable animations by importing NoopAnimationsModule.

import {NoopAnimationsModule} from ‘@angular/platform-browser/animations’;

@NgModule({

…

imports: [NoopAnimationsModule],

…

})

export class PizzaPartyAppModule { }

Step 3: Import the component modules – Import NgModule for each component you want to use:

import {MatButtonModule, MatCheckboxModule} from ‘@angular/material’;

@NgModule({

…

imports: [MatButtonModule, MatCheckboxModule],

…

})

export class PizzaPartyAppModule { }

Alternatively, you can create a separate NgModule that imports and then re-exports all of the Anguar Material components that you will use in your application. By exporting them again, other modules can simply include your CustomMaterialModule wherever Material components are needed, and automatically get all of the exported Material modules. A good place for importing/exporting the application-wide Material modules is the SharedModule.

import {MatButtonModule, MatCheckboxModule} from ‘@angular/material’;

@NgModule({

imports: [MatButtonModule, MatCheckboxModule],

exports: [MatButtonModule, MatCheckboxModule],

})

export class MyOwnCustomMaterialModule { }

Whichever approach you use, be sure to import the Angular Material modules after Angular’s BrowserModule, as the import order matters for NgModules.

Step 4: Include a theme – Including a theme is required to apply all of the core and theme styles to your application. To get started with a prebuilt theme, include one of Angular Material’s prebuilt themes globally in your application. If you’re using the Angular CLI, you can add this to your styles.css:

@import “~@angular/material/prebuilt-themes/indigo-pink.css”;

If you are not using the Angular CLI, you can include a prebuilt theme via a <link> element in your index.html.

Step 5: Gesture Support – Some components (mat-slide-toggle, mat-slider, matTooltip) rely on HammerJS for gestures. In order to get the full feature-set of these components, HammerJS must be loaded into the application. You can add HammerJS to your application via npm, a CDN (such as the Google CDN), or served directly from your app.

To install via npm, use the following command: npm install –save hammerjs

After installing, import it on your app’s entry point (e.g. src/main.ts).

import ‘hammerjs’;

Step 6 (Optional): Add Material Icons – If you want to use the mat-icon component with the official Material Design Icons, load the icon font in your index.html.

<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>

Note that mat-icon supports any font or svg icons; using Material Icons is one of many options.

Go back to Tutorial