Codementor Events

Angular by Examples: Integrating Angular Material (video included)

Published Oct 26, 2018Last updated Nov 01, 2018
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:

Screen Shot 2018-10-26 at 3.35.11 PMEnd Results!

Source Code Repositories

Learn more

See more at https://matthewdavis.io

Discover and read more posts from Matthew Davis
get started