-1

When import angular material controls it look like this. browser output

and material controls component.html

where I chose theme during angular material installation. angular.json

Though its correct syntactically but I do not know what problem behind this. How to display angular material controls look like as shown in angular material site?

Munawar Hassan
  • 27
  • 5

1 Answers1

0

I found answer. It is the theming issue in Angular. You need to fix this issue by the following steps.

import below URL to 'style.css' file in 'src' folder.

@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";

or in 'angular.json' file add the above URL to the "style" property. See the below link.

Results

Before importing URL into style.css or style property of angular.json:

Before importing URL into style.css or style property of angular.json

After importing URL into style.css or style property of angular.json:

After importing URL into style.css or style property of angular.json

References:

Munawar Hassan
  • 27
  • 5
  • This happens only if you forgot to add angular material to your project with ng add @angular/material. I mean there is option for prebuilt-themes. – Daniel Vágner May 05 '22 at 11:23