Angular 15 Material Tutorial & Example

Throughout this tutorial, we'll look at how to use Angular Material 15 to create professional user interfaces. In the previous tutorial, you learned how to install Angular CLI 15 and create a fresh angular 15 front-end. Now let's look at how we can incorporate Angular Material 15 into our Angular application.

Google created the Material Design design language in 2014. It establishes a set of principles and guidelines for developing user interfaces, including motion (animations) and interaction (gestures). Material Design for Angular is implemented by Angular Material. It includes multiple components and patterns for navigation, forms, buttons, and layouts.

At the moment, the most recent version is Angular Material v15. We'll see how to add Material Design to Angular 15 in two ways in this tutorial:

• The long way: manually completing a series of steps. This is applicable to Angular 4+ versions.
• The fast way: use the ng add command of Angular CLI to quickly add Angular Material using Angular Schematics in one step. This method is only compatible with Angular 6+.

Setting up Angular Material v15

Navigate to your terminal, then inside your newly created Angular 15 front-end application, run the following commands to install Angular Material and Angular CDK:

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

Adding angular animations

Because some Angular Material components use animations, you must include animation support in your angular 15 front-end application to enable these animations.

Return to your terminal and type the following command to install the angular animations module:

$ npm install --save @angular/animations

After that, all you have to do is add this module to your app's configuration. So go ahead and open it up from the src/app/app.module.ts file then import the BrowserAnimationsModule module and add it to the array of imports as follows:

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

imports: [
    BrowserModule, BrowserAnimationsModule
],

Adding 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.

Simply go to your command-line interface and install the package from npm as follows:

$ npm install --save hammerjs

Following that, you'll then need to import the library in your application's entry point which resides in the main.ts file as follows:

/* [...] */
import 'hammerjs';

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

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

Importing a material theme

Themes are needed in order to style the Material components in your application. You have the option of using a custom or pre-built theme.

Themes are stylesheets (CSS files). Check out the @angular/material/prebuilt-themes directory in the node_modules folder of your angular 15 project to see all of the available pre-built 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.

Go to the style.css file and add the following CSS @import

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

Adding Angular Material v15 with ng-add

With the release of Angular 6+, we've got a new ng add command that is available via the CLI, making it simple to add new capabilities to the project.

This command will make use of the package manager to download and install any new dependencies, as well as to execute the installation scripts. That way, dependencies and configuration changes are kept up to date in the project, and package-specific initialization code is executed.

As we proceed through the following steps, we'll make use of the ng add command in order to add Angular Material to the angular 15 application that we developed previously. Go back to your command line interface and start by navigating to the directory that contains your project's files and then execute the following command:

$ ng add @angular/material

By running this command, we install Angular Material v15 and the associated themes into the project.

Conclusion

That's it; our angular 15 front-end application has now been updated to use Angular Material.

As a summary, the focus of this tutorial was on how to use Angular Material v15 to create professional user interfaces for a variety of applications.

It was previously covered how to install Angular CLI 15 and how to create a brand-new Angular 15 front-end in the previous tutorial. In this article, we examined how we can integrate Angular Material into our angular 15 application.

It was in 2014 that Google introduced the Material Design language. User interfaces, including motion (animations) and interaction, are governed by a set of principles and guidelines established by an International Standards Organization. Angular Material consists of a variety of components and patterns for navigation, forms, buttons, and layouts, among other things that conforms to material design.

We've seen how to incorporate Material Design into Angular 15 in two different ways:

• The time-consuming path, which entails manually completing a series of steps. This is applicable to versions of Angular 4 and higher.
• The short and recommended path, which uses the ng add command to quickly and easily add Angular Material by using Angular Schematics in one step. This is the quickest method. This method is only compatible with Angular 6 and higher.

Finally, learn to build a CRM UI with navigation using Angular Material 15.

If you don't want to use material design, you can use Angular with Bootstrap 5 to build professional UIs.

In the following tutorial, we'll look at a more in-depth example of using Material data-table to create tables for our data.

• Author: Ahmed Bouchefra Follow @ahmedbouchefra

• Date: 18 Nov 2022