Menu
I have tried to apply the normal button of angular material but the ripple affect will not work at all.
Iv'e got:
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import 'hammerjs';
import 'web-animations-js';
import { MatCheckboxModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatButtonModule} from '@angular/material/button';
imports: [
MatButtonModule,
MatCheckboxModule,
BrowserAnimationsModule
],
providers: [WeatherService],
bootstrap: [AppComponent, WeatherComponentComponent]
})
In the global styles.css file i have: @import
'~@angular/material/prebuilt-themes/deeppurple-amber.css';
dependancies:
"dependencies": {
"@angular/animations": "^5.2.10",
"@angular/cdk": "^5.2.5",
"@angular/common": "^5.2.10",
"@angular/compiler": "^5.2.10",
"@angular/core": "^5.2.10",
"@angular/forms": "^5.2.10",
"@angular/http": "^5.2.10",
"@angular/material": "^5.2.5",
"@angular/platform-browser": "^5.2.10",
"@angular/platform-browser-dynamic": "^5.2.10",
"@angular/router": "^5.2.10",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.26"
"devDependencies": {
"@angular/cli": "^1.7.4",
"@angular/compiler-cli": "^5.2.10",
"@types/jasmine": "^2.8.6",
"@types/node": "^9.6.6",
"codelyzer": "^4.3.0",
"jasmine-core": "^3.1.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^2.0.2",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.6.0",
"protractor": "^5.3.1",
"ts-node": "^6.0.0",
"tslint": "^5.9.1",
"typescript": "^2.7.0"
}
HTML:
<button mat-raised-button color="primary">Button</button>
I have also tried to link the stylesheet in the global HTML - but doesn't work still.
513
I got the same problem and I solved the issue at the end. I looked at several SO posts but none of them works in my case. I'll show how I did below, so it might help anyone who came across the issue.
I was working on the Tutorial: Tour of Heroes in Angular's site, so my app was fairly small and simple. To use the material components, I follow the "Getting Started" page on the Angular Material official website. I use Angular CLI, so I imported the prebuilt theme css in styles.css, imported MatButtonModule and tried <button mat-button>basic</button>, but the button ripple effect just didn't work.
In index.html add a class mat-app-background to body like this
<body class="mat-app-background">
...
</body>
And the ripple effect in button is now working!
This solution is based on Angular Material Theming Guide. They have a few words about additional settings before the theming actually works:
Finally, if your app's content is not placed inside of a
mat-sidenav-containerelement, you need to add themat-app-backgroundclass to your wrapper element (for example thebody). This ensures that the proper theme background is applied to your page.
This isn't mentioned in Angular Material's Getting Started page. So if you follow that page and test the mat-button right away, it might not work.
Definitely not. The solution above is more likely to work if your situation is similar to mine. But I will show you what step I did before, which leads to my situation.
I use Angular CLI to create my Angular app, and I followed the Getting Started tutorial as below:
@angular/material @angular/cdk @angular/animations
MatButtonModule in app.module.ts.In app.module.ts I have
...
import {MatButtonModule} from '@angular/material';
@NgModule({
...
imports: [
BrowserModule,
...
MatButtonModule, // import the Angular Material modules after Angular's BrowserModule, as described in the tutorial.
],
...
})
In styles.css
@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';
...
In app.component.html
...
<button mat-button>Basic</button>
...
And I clicked on the button and ripple effect did not work. So I got stuck here. But, a strange thing is, if I switch to the prebuilt theme deeppurple-amber.css, the ripple then works, without applying the Solution above.
If I switch to other prebuilt themes like purple-green.css or pink-bluegrey.css, ripple effect is again not working. I'm not sure what the cause is, but probably the theming is still not configured properly so things become unpredictable. Sometimes it works, sometimes it doesn't, which is not a good sign, so let's proceed to the next step.
mat-sidenav-container or the class mat-app-background to make material theming configured properly. Then finally, the ripple effect should work now.
185
Not a solution for OP, but this is what's been causing it for me:
Make sure the BrowserAnimationsModule is imported:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
...
imports: [
BrowserAnimationsModule
],
...
})
The project I'm working on had the NoopAnimationsModule included, remove this first; you can't add them both.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
