DEV Community

Manthan Ankolekar
Manthan Ankolekar

Posted on

4 1

Adding Angular Material to Angular Projects.

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more