Adding Angular Material to Angular Projects.

Install Angular Material

ng add @angular/material

The ng addcommand will install Angular Material, the Component Dev Kit (CDK), Angular Animations and ask you the following questions to determine which features to include:

1. Choose theme custom or pre-built-in material themes.
2. Set up global Angular Material Typography Styles.
3. Set up browser animation for Angular material.

On Installation in angular project files

• Added project dependencies to package.json
• Added the Roboto font to your index.html
• Added the Material Design icon font to your index.html
• Added a few global CSS styles to:
  • Remove margins from body
  • Set height: 100% on html and body
  • Set Roboto as the default application font

Finally need to import module in app.modult.ts to display the component.

Example :

//app.module.ts
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

@NgModule ({
  imports: [
    MatSlideToggleModule,
  ]
})
class AppModule {}

And in app.component.html file and run the project

//app.component.html
<mat-slide-toggle>Toggle me!</mat-slide-toggle>

Reference : Official Docs