Angular material component are not working even after installation

[Oliverq755]

Prerequisites

Angular material is not working after installing it to the free version of the argon-angular-dashboard screenshot attached.

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed
• I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

The expected result should include:

• default styles of argon-dashboard
• style and HTML code of Angular material
• all the features and function of Angular material

Current Behavior

The current behavior includes only the styles of argon-angular-dashboard. It has all the dependencies installed, however, it doesn't show the styles of Angular material

Steps to Reproduce

In order to replicate this issue, follow the following steps:

1. Download the free version of argon-angular-dashboard
2. Add dependencies of angular material by using ng add @angular/material
3. Add @import "~@angular/material/prebuilt-themes/indigo-pink.css"; in your styles.scss
4. Add any component in your HTML component, for example, let take a button.
   <button mat-raised-button color="accent">Accent</button>
5. Check the output on your page.

Context

• Device: Lenovo Thinkpad
• Operating System: Ubuntu 19.10
• Browser and Version: chrome Version 80.0.3987.106 (Official Build) (64-bit)

Output screenshot

[Oliverq755]

I am still waiting for the answers and any workarounds.

[databill86]

Same problem here...

[kmooventhan98]

Sometimes it requires server restart

[fidoandfido]

Have you imported MatButtonModule into app.module.ts?

import { MatButtonModule } from '@angular/material/button';

Then:

@NgModule({
  declarations: [
  <<SNIP>>
  ],
  imports: [
    HttpClientModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule,
   <<snuo
 ]

[sudarshan-dev-locusnine]

Im also facing the same issue, but it's rendering not native an not mat-raised -button, something in between

[stajilov]

Facing the same issue, styles are not loaded, though I’m getting proper html and functionality 😾

[Kalvino]

Ensure you have imported all your required modules;

e.g mat-form-field input should have 'matInput' and
import {MatInputModule} from '@angular/material/input';

For mat buttons;
import {MatButtonModule} from '@angular/material/button';
then add to your module imports

imports: [
MatInputModule,
MatButtonModule
]

[stajilov]

Solved the issue, in my case, I had to import the modules in the app component, cause was using some of the components directly in the app-component

[joncampbell0730]

Ive followed the material get started several times and none of my material imports are working at all. Ive added the import to my app.module and added it to the import list and still nothing. please someone help

[ahmediz]

Ive followed the material get started several times and none of my material imports are working at all. Ive added the import to my app.module and added it to the import list and still nothing. please someone help

same here.

[jacolaisen]

Ive followed the material get started several times and none of my material imports are working at all. Ive added the import to my app.module and added it to the import list and still nothing. please someone help

Same here

[prajjwalag]

I was facing the same issue, but after following his instructions @kmooventhan98 and restarted my server, and its working fine.

So anyone who is facing this issue can restart the server and try.

[votala]

I think usage of Material components changed single Module implementation to reduce bundle size after compile., all the components of Material should be imported in specific module where the component is used.

In your case @fidoandfido 's answer would work.

[joseguzmann]

Sometimes it requires server restart

this was the answer!!!! Thanks

[nikkkunj]

I believe If we have a submodule then this happens, instead of importing it to app-module import it into your intermediate module.

[nikita-fuchs]

Same issue here since upgrade from material design 13 to 14, it's simply not rendering anymore. it's imported in every module, but no chance.

Thank god with Angular 15 we won't have this module bogus anymore.

[Fbisons]

Same here ;/ with angular 14

[edoura]

Solved the issue, in my case, I had to import the modules in the app component, cause was using some of the components directly in the app-component

here also solved it this way.
importing the MatButtonModule in the component which you are using in the template

<button mat-raised-button color="accent">sign up</button>

👍