Angular Material - Getting started

Install packages

npm i --save @angular/material @angular/cdk
npm i --save @angular/material-moment-adapter moment
npm i --save @angular/animations
npm i --save web-animations-js
npm i --save hammerjs

Importing stuffs

Add this to src/styles.css.

• indigo-pink.css is the default theme, could change to purple-green.css, pink-bluegrey.css, deeppurple-amber.css as you wish.

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

Add this to src/main.ts

import 'hammerjs';

Add this to src/index.html

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

import these in src/app/app.module.ts

• Be sure to import the Angular Material modules after Angular's BrowserModule.
• Can choose the modules you want. i.e. MatButtonModule, MatCheckboxModule.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatCheckboxModule } from '@angular/material';

@NgModule({
  ...
  imports: [
      BrowserAnimationsModule,
      MatButtonModule,
      MatCheckboxModule],
  ...
})

Common Angular Material NgModules

INPUT

Button & Indicator

• MatButtonModule
• MatButtonToggleModule
• MatChipsModule
• MatIconModule
• MatProgressSpinnerModule
• MatProgressBarModule

Form

• MatInputModule
• MatSelectModule
• MatRadioModule
• MatCheckboxModule
• MatDatepickerModule
• MatSlideToggleModule
• MatSliderModule
• MatAutocompleteModule
• MatFormFieldModule

OUTPUT

Navigation

• MatMenuModule
• MatToolbarModule
• MatSidenavModule

Layout

• MatCardModule
• MatListModule
• MatDividerModule
• MatGridListModule
• MatTabsModule
• MatExpansionModule
• MatStepperModule

Data Table

• MatTableModule
• MatSortModule
• MatPaginatorModule

Popup & Modal

• MatDialogModule
• MatTooltipModule
• MatSnackBarModule

Reference

• Getting started | Angular Material