Angular by Examples: Integrating Angular Material (video included)
Learn how to quickly & easily integrate Angular Material in your Angular Web Application
https://www.youtube.com/watch?v=yCApoP-qous
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:
<div class="wrapper">
<button mat-raised-button
color="primary">
Click me! Material works!
</button>
</div>
Finally, we need to @import the material theme from our styles.scss file:
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
End result:
End Results!
