Learn how to quickly & easily integrate Angular Material in your Angular Web Application

Installation

Installing support for Angular Material requires two libraries:

$ npm install @angular/material @angular/cdk

Integration

In order to use a material component we must first import the module:

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

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

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,
    BrowserAnimationsModule,

    MatButtonModule,

  ],

  providers: [],
  bootstrap: [AppComponent]

})
export class AppModule {
}

Now that we’ve imported the MatButtonModule we can go ahead and use it in our app.component.html template:

Finally, we need to @import the material theme from our styles.scss file:

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

End result:

Source Code Repositories

• https://github.com/mateothegreat/ng-byexamples-material-integration

Learn more

• Angular Material Documentation