Angular Material - Installation or Setup with angular cli in angular material2 - Angular Material Tutorial
In this example, we will be using @angular/cli (latest) and the latest version of @angular/material. You should at least know the basics of Angular 2/4 before continuing the steps below.
Install angular material module from npm:
npm install @angular/material --save
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team
his only applies to versions 2.0.0-beta.3 and up. Install the @angular/animations module:
npm install @angular/animations --save
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team
his only applies to versions 2.0.0-beta.8 and up. Install the @angular/cdk module
npm install @angular/cdk --save
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team
In your application module import the components which you are going to use:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule,
MdButtonModule,
MdSnackBarModule,
MdSidenavModule,
CommonModule,
// This is optional unless you want to have routing in your app
// RouterModule.forRoot([
// { path: '', component: HomeView, pathMatch: 'full'}
// ])
],
declarations: [ AppComponent ],
boostrap: [ AppComponent ]
})
export class AppModule {}
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team
You are now ready to use Angular Material in your components!
Note: The docs for specific components will be coming soon.