Adding Angular Material to Angular Projects.

Manthan Ankolekar - Dec 2 '22 - - Dev Community

Install Angular Material

ng add @angular/material
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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

//app.component.html
<mat-slide-toggle>Toggle me!</mat-slide-toggle>
Enter fullscreen mode Exit fullscreen mode

Reference : Official Docs

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .