Angular 5 with Angular Material – Button Ripple Effect not working

Issue

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.

Solution

Okay I think I may have found some bug in angular as I was able to track the cause. It was due to usage of variable inside here: {{forecasts.list[0].dt}} Temperature (celsius): {{ weathers.main.temp }} . – So basically using {{ weathers.main.temp }} within that broke the animations in the entire page. –

Answered By – makat

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.