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