Angular 13 Material Tutorial & Example

Angular 13 Material Tutorial & Example

Throughout this tutorial, we'll look at how to use Angular Material 13 to create professional user interfaces. In the previous tutorial, you learned how to install Angular CLI 13 and create a fresh angular 13 front-end. Now let's look at how we can incorporate Angular Material 13 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 v13. We'll see how to add Material Design to Angular 13 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 v13

Navigate to your terminal, then inside your newly created Angular 13 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 13 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 13 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 '[email protected]/material/prebuilt-themes/deeppurple-amber.css';

Adding Angular Material v13 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 13 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 v13 and the associated themes into the project.

Conclusion

That's it; our angular 13 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 v13 to create professional user interfaces for a variety of applications.

It was previously covered how to install Angular CLI 13 and how to create a brand-new Angular 13 front-end in the previous tutorial. In this article, we examined how we can integrate Angular Material into our angular 13 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 13 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 13.

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.



✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also Gitter

✋ Want to master Angular 14? Read our angular tutorial and join our #DailyAngularChallenge where we learn to build components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.

✋ Make sure to join our Angular 14 Dev Community 👈 to discuss anything related to Angular development.

❤️ Like our page and subscribe to our feed for updates!