Add Angular 6 Material to Angular 6 and ASP.NET Core app

Angular material is material design components for the Angular application to create comprehensive, modern UI components that work across the web, mobile, and desktop. Earlier, I posted about how to create an Angular 6 app with Visual Studio 2017 & ASP.NET Core and also posted about implementing ASP.NET Core SPA template features. In this post, we’ll see how to add angular 6 material to angular 6 and ASP.NET Core app. The steps given in this post are also applicable for any standard angular 6 application.

Add Angular 6 Material to Angular 6 and ASP.NET Core app

​

If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here.

You can either create a standard angular 6 app via ng new command or you can follow this post to create an angular 6 app with Visual Studio and ASP.NET Core.

Once the app is created, we’ll need to install a couple of things. First, install Angular material and Component Dev Kit (CDK) via the following command:

npm i --save @angular/material @angular/cdk

Next, install the angular animation as some of the angular material components relies on angular animation.

npm i --save @angular/animations

Finally, to allow gesture support, install hammer.js.

npm i --save hammerjs

Next, let’s make the required configuration changes to make angular material work. First, import hammer.js in the main.ts file. Like,

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import 'hammerjs';

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

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

To use any angular 6 material component, we need to add Angular material modules. You can either add in the app.module.ts file or create a separate module file. The ideal solution is to create a separate file. Let’s create a new file named angmaterial.ts in the app folder with the following code.

import { MatButtonModule, MatSliderModule } from '@angular/material';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [MatButtonModule, MatSliderModule],
  exports: [MatButtonModule, MatSliderModule]
})

export class AngMaterialModule { }

The above code adds button and slider angular 6 material components. You can find more about all angular 6 material components here. Next, add this module to app.module.ts file.

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

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngMaterialModule } from './angmaterial';

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

Angular 6 material comes with 4 predefined themes. To use any of the theme, you need import the CSS style sheet in the style.css file. Like,

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

Finally, add code for angular 6 material components. You can get the sample code for any of the component from here. Add the following code in the app.component.html file to add a material button and a slider.

<button mat-raised-button color="warn">Warn</button>
  <br />
    <div class="mat-app-background">
      <mat-slider></mat-slider>
    </div>
  </div>

Run the application via ng serve command to see the changes.

That’s it. This is a good start and you can experiment with other angular 6 material components.

Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then