Angular by Examples: Integrating Angular Material
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: