How to add Angular2 Material in our Angular2 Projects Como agregar Angular2Material a un Proyecto Angular2

Hi everyone, in this post you are going to find how you can setup  Angular2Material Components in your Angular2Project.

What is Angular2Material?

Angular2Material has several components so far which you can use them to build you own Angular 2 Application, Angular2Material is based in MaterialDesign https://material.io/guidelines/

How does it work?

Please follow the next steps in order to add Angular2Material, but First of all, you need set up a basic Angular 2 Project which you can setup it using this post=> Steps to build your first Angular 2 Application.

1st Install Angular2 Material

Please using visual studio code open an Integrated Terminal and run this command.

       

      npm install --save @angular/material

       

After the command finish take a look into the package.json and you have to see that Angular2Material was added.

2nd Add Animations

Angular2Material has component with much animations therefore we need install them in order to use it.
Please execute this command.

       

      npm install --save @angular/animations

       

In the same way you should see into the package.json that Animations was added.

3th Import Angular2Material & Animations

Now you must find the app.module.ts and add the follow imports.

app.module.ts

       
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

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

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

4th Add a Theme

In this step we need find the styles.css file and add the follow imports.

The first one gives to our Angular 2 Application a theme.
The second one download a set of awesome icons that Angular 2 Material has to use.

style.css

           
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
 

Also you can use these others themes to replace the first import.

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

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

@import '~@angular/material/prebuilt-themes/purple-green.css';

5th Run the application

Now we are ready to execute our Application, Please execute ng serve.

And navigate to http://localhost:4200/ after that, you should see the follow.

Thanks everybody and please leave your comments, see you next time.

Content in Spanish.

Whether you want to see this post in a Spanish video, please see the follow video.