Search code examples
angularangular-materialangular7

Ripple effect is not displaying in button in angular app - Angular-Material


https://material.angular.io/components/button/overview

I am using this angular-material button but everything is working fine but I am not getting ripple effect onclick of button?

https://stackblitz.com/edit/angular-7-lazy-loading-lnchhw?file=src/styles.css

I have produced it in stackblitz but its working fine but not in my angular app?

I am missing something or there is some bug?

app.component.html

<button mat-button>Basic</button>

app.module.ts

 import { MatButtonModule } from '@angular/material';
      imports: [
   BrowserModule,
        HttpClientModule,
        RouterModule,
        AppRoutingModule,
        NgbModule.forRoot(),
        BrowserAnimationsModule,
        NoopAnimationsModule
        MatButtonModule,
        MaterialModule
        ],

Solution

  • Don't import both BrowserAnimationsModule and NoopAnimationsModule. You only want BrowserAnimationsModule.

    NoopAnimationsModule essentially disables animations!