reference: https://material.angular.io/
While in your project folder
npm install –save @angular/material @angular/cdk
Some Material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app.
NPM
npm install –save @angular/animations
Import the component modules
In app.component.ts import the NgModule for each component you want to use:
import {MatButtonModule, MatCheckboxModule} from ‘@angular/material’;
@NgModule({
…
imports: [MatButtonModule, MatCheckboxModule],
…
})
export class PizzaPartyAppModule { }
Alternatively, you can create a separate NgModule that imports all of the Angular Material components that you will use in your application. You can then include this module wherever you’d like to use the components.
import {MatButtonModule, MatCheckboxModule} from ‘@angular/material’;
@NgModule({
imports: [MatButtonModule, MatCheckboxModule],
exports: [MatButtonModule, MatCheckboxModule],
})
export class MyOwnCustomMaterialModule { }
Whichever approach you use, be sure to import the Angular Material modules after Angular’s BrowserModule, as the import order matters for NgModules.
Include a theme
Including a theme is required to apply all of the core and theme styles to your application.
To get started with a prebuilt theme, include one of Angular Material’s prebuilt themes globally in your application. If you’re using the Angular CLI, you can add this to your styles.css:
@import “~@angular/material/prebuilt-themes/indigo-pink.css”;
Gesture Support
Some components (mat-slide-toggle, mat-slider, matTooltip) rely on HammerJS for gestures. In order to get the full feature-set of these components, HammerJS must be loaded into the application.
You can add HammerJS to your application via npm, a CDN (such as the Google CDN), or served directly from your app.
To install via npm, use the following command:
npm install –save hammerjs
After installing, import it on your app’s entry point (e.g. src/main.ts).
import ‘hammerjs’;
Add Material Icons
If you want to use the mat-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">
No Comments Yet