Install Angular Material
ng add @angular/material
The ng add
command will install Angular Material, the Component Dev Kit (CDK), Angular Animations and ask you the following questions to determine which features to include:
- Choose theme custom or pre-built-in material themes.
- Set up global Angular Material Typography Styles.
- 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%
onhtml
andbody
- Set Roboto as the default application font
- Remove margins from
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