Angular4 Material Setup

Creating a project with Angular4 Material from beginning on wards:

Create a new project

>ng new hg_material1

Once command has entered then navigate to hg_material1 folder and open in any IDE. Here am working on Visual studio code IDE.

>cd hg_material1

Now Install the dependencies by following through below command:

> npm install --save @angular/material @angular/animations

We will install two packages

• @angular/material
  This is the official Material package for Angular.
• @angular/animations
  This is new for version 4 and it is the necessity of installing animations separately from the angular core library. Certain Material components need access to the animations library, which is why we’re installing it here.

Now open the /src/app/app.module.ts file and import the below packages which we have installed:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule } from '@angular/material';

After that we have to import the Modules under @NgModules and Save the file:

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    MdButtonModule,
    MdMenuModule,
    MdCardModule,
    MdToolbarModule,
    MdIconModule
  ],
  
})
Now we have to define the CSS (/src/styles.css) file with the below code:

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

Based on your preferences, you can change indigo-pink.css to:

• deeppurple-amber.css
• indigo-pink.css
• pink-bluegrey.css
• purple-green.css

Add Material Icons

If you want to use the md-icon component with the official Material Design Icons, load the icon font in your index.html.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

For Components , please find the refer link:    https://material.angular.io/components