How to setup angular with angular material

Getting Started Angular  With Angular Material

This guide explains how to setup your Angular project to begin using Angular Material. It includes information on prerequisites, installing Angular Material, and optionally displaying a sample material component in your application to verify your setup.

Steps to install Angular Material:

• Step 1: Install the Angular CLI
• Step 2: Create a workspace for Angular Project
• Step 3: Install Angular Material, Angular CDK and Angular Animations
• Step 4: Configure animations
• Step 5: Import the Angular Material component modules
• Step 6: Gesture Support

In detail information about steps to install Angular Material:

Step 1: Install the Angular CLI

installed the Angular CLI globally using npm:

 npm install -g @angular/cli

Step 2: Create a workspace for Angular Project

To create a new workspace:

ng new angular-material-app

Step 3: Install Angular Material, Angular CDK and Angular Animations

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

Using the Angular CLI ng the add command will update your Angular project with the correct dependencies, perform configuration changes and execute initialization code.

ng add @angular/material

Step 4: Configure animations

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

export class AppModule { }

Step 5: Import the Angular Material component modules

Imports the Angular Material component modules which you need in App.

Below are a few examples.

import { MatAutocompleteModule, MatButtonModule, MatCheckboxModule, MatDatepickerModule, 
MatFormFieldModule, MatInputModule, MatRadioModule, MatSelectModule, MatSliderModule, 
MatSlideToggleModule } from '@angular/material';

@NgModule({
imports: [
     MatAutocompleteModule,
     MatButtonModule,
     MatCheckboxModule,
     MatDatepickerModule,
     MatFormFieldModule,
     MatInputModule,
     MatRadioModule,
     MatSelectModule,
     MatSliderModule,
     MatSlideToggleModule
 ]})

Step 5: Installing Flex Layout Module for flex css

npm install @angular/flex-layout