Angular Material

(image source)

I’ve recently been working with Angular Material a lot lately, and wanted to highlight some cool things about it. I also wanted to walkthrough how you can create a material module that you can use in your Angular Projects. This simplifies utilizing the various Angular Material components since you just include it once in your main module. Obviously if you’re concerned with project size you cant rim this down, but its still a cool concept I wanted to highlight.

Some background is just that Angular Material is a Library of components provided by Google that can be used in Angular applications. It provides basic animations for things like input and navigation. It is of great use to developers because it allows them to quickly include Google style animations in any project. Before libraries like Angular Material, developers would have to go out and create their own animations which was often buggy at best. Using the provided Material Libraries allows you to use something this is reliable, and provides a consistent style throughout your application.

The main Angular Material site can be reached here https://material.angular.io/.

If you want to just use specific components from Angular Material then you have to reference them in your Angular app.module file and then pull them into your components etc. This can be tedious if you are using several material components in your application. As I mentioned in the intro, a way around this is to create a module that includes all the Angular Material components. With the module you’ve created, you just have to include that in your app.module file once.

The following is the process to create a single Angular Material module to use throughout your project.

First in your terminal install Angular Material in your project. Go to your root folder and run the following:

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

Next import a theme in your apps “styles.css” file with the following

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

If you want more specific styling or to further customize the styles that you’re using, check out this page https://material.angular.io/guide/theming and this page https://material.angular.io/components/categories.

Now go over to the root directory of your project and use the Angular cli to generate a module for material with:

ng generate module material

Now within the generated material module go ahead and copy and paste the following:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
  MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule,
} from '@angular/material';

@NgModule({
  imports: [
    CommonModule
  ],
    exports: [
    BrowserAnimationsModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
  ],
  declarations: []
})
export class MaterialModule { }

Now if you go back to your app.module and add the following import you can use any of the material components in your application.

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

Overall I’ve had a good experience with Angular Material, and highly recommend it for use with your applications.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s