CODEWITHSUNDEEP
angularangular-material2
Mawg
Mawg

Reputation: 40145

Angular Material button works, but does not look Material

So, I am just starting to use Angular Material.

I added two buttons and a slider to my new app:

<button class="mat-button"  color="accent">An Angular Material button</button>
<hr>

<a mat-button href="https://www.google.com/" target="_blank">Google</a>
<hr>

<mat-slider min="1" max="100" step="1" value="1"></mat-slider>

The slider slides and the Google button launches a new tab with Google, when clicked. However, the buttons do not look material:

enter image description here

I am not going to post the full app (yet). I have been following the official documentation, which is straightforward enough, and the fact that the slider & Google button work should show that I have probably set it up almost correctly.

The only problem being, of course, the appearance of the buttons.

As per the docs, I have added @import "~@angular/material/prebuilt-themes/indigo-pink.css"; to my styles.css. I also tried removing the tilde, which had no effect.

I don't know if this bit is a distraction, but I looked at the AM Themes documentation which suggested an alternative of adding

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

to my index.html. But, that gave an error:

Refused to apply style from 'http://localhost:4200/node_modules/@angular/material/prebuilt-themes/indigo-pink.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

As I said, that is maybe a distraction, because I created my project from the CLI.

I have a file material.module.ts

import {MatButtonModule} from "@angular/material/button";
import {MatSliderModule} from "@angular/material/slider";

const materialModules =  [MatButtonModule, MatSliderModule,];

@NgModule({
  imports: materialModules,
  exports: materialModules,
})
export class MaterialModule{}

and, obviously, I import that into my app.modules.ts (after BrowserAnimationsModule, as per the Getting Started docs linked above).

Any idea what I might be doing wrongly, or do you need the complete code (or just certain files)?

Upvotes: 1

Views: 4478

Answers (1)

Unknown
Unknown

Reputation: 2137

You just need to add the attribute 'mat-raised-button' to your button.

Here is the reference to Angular Material buttons for more attributes.

<button class="mat-button" mat-raised-button  color="accent">An Angular Material button</button>

Here is the working example in the Stackblitz.

Upvotes: 5

Related Questions