Why aren't my Angular 6 buttons rippling?
Clash Royale CLAN TAG#URR8PPPWhy aren't my Angular 6 buttons rippling?
lately I have been coding the frontend of my application. I have been utilizing Angular 6 to build it, but I have noticed a small deviation in my buttons. They darken when you hover over them, but they do not have any ripple effect when you click them. Here is my app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {Routes} from '@angular/router';
import { AppComponent } from './app.component';
import {
MatToolbarModule, MatButtonModule, MatInputModule, MatIconModule, MatSelectModule, MatTableModule, MatGridListModule,
MatCardModule, MatMenuModule, MatFormFieldModule, MatOptionModule
} from '@angular/material';
import { PlaceholderComponent } from './placeholder/placeholder.component';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';
import {HttpClientModule } from '@angular/common/http';
import { RegisterComponent } from './register/register.component';
import {FormsModule} from '@angular/forms';
import {ReactiveFormsModule} from '@angular/forms';
import { LayoutModule } from '@angular/cdk/layout';
import 'hammerjs';
const routes: Routes = [
{path: 'placeholder', component: PlaceholderComponent},
{path: 'register', component: RegisterComponent},
];
@NgModule({
declarations: [
AppComponent,
PlaceholderComponent,
RegisterComponent,
LoginComponent,
UserComponent,
RegisterComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatCardModule,
MatToolbarModule,
MatButtonModule,
MatInputModule,
MatSelectModule,
MatTableModule,
MatIconModule,
MatFormFieldModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forRoot(routes ),
MatGridListModule,
MatCardModule,
MatMenuModule,
LayoutModule,
MatOptionModule
],
exports: [
MatButtonModule,
MatCardModule,
MatMenuModule,
MatIconModule,
MatSelectModule,
MatInputModule,
MatToolbarModule,
MatTableModule,
MatSelectModule,
BrowserAnimationsModule,
MatFormFieldModule,
MatOptionModule
],
providers: ,
bootstrap: [AppComponent]
})
export class AppModule { }
My app.component.css
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
.divider {
width: 50px;
height: auto;
display: inline-block;
}
.mat-card {
text-align: -webkit-center;
}
.demo-toolbar {
display: flex;
align-items: center;
width: 100%;
}
.demo-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.demo-full-width {
width: 100%;
}
body {
margin: 0;
font-family: Roboto, sans-serif;
}
mat-card {
max-width: 80%;
margin: 2em auto;
text-align: center;
}
mat-toolbar-row {
justify-content: space-between;
}
.done {
position: fixed;
bottom: 20px;
right: 20px;
color: white;
}
.content-center {
text-align: -webkit-center;
}
And here's my app.component.html.
<mat-toolbar color="primary">
<span> A store</span>
<span class="demo-toolbar"></span>
<button mat-button color="accent">Register</button>
<span class="divider"></span>
<button mat-button >Login</button>
<span class="divider"></span>
<button mat-button>See your profile now!</button>
</mat-toolbar>
<mat-card>
<span>
This is a shop.
Login or register above!
</span>
</mat-card>
<div>
<router-outlet></router-outlet>
</div>
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta charset="utf-8">
<title>ClothAppFrontEnd</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="mat-app-background">
<app-root></app-root>
</body>
</html>
My Angular site
The index.html
I unfortunately don't see what could be wrong. I've imported the theme, and I've linked the Material Icons from Google in my index.html. Help is gratefully accepted.
Hi. Here is the MCV example in StackBlitz.
https://stackblitz.com/edit/angular-xiapvj
I've added the MCV example. @Igor
– Melcalc
7 hours ago
2 Answers
2
That's :hover action of Angular Material buttons, mat-button. See its official mat-button example on https://material.angular.io/components/button/overview, there would be a<div class="mat-button-ripple mat-ripple" matripple=""></div>in the <button> tag under <span> tag if hovering the cursor over the button. It's the mat-button-ripple that caused the :hover effect.
:hover
mat-button
mat-button
<div class="mat-button-ripple mat-ripple" matripple=""></div>
<button>
<span>
mat-button-ripple
:hover
After knowing the reason of the rippling, you could try many ways to override the styling. An extreme way is to use ::ng-deep combinator to override mat-button-ripple on the specific page.
::ng-deep
mat-button-ripple
HI, @T.Liu, how would you use the ::ng-deep combinator to override mat-button-ripple on the page? I am a neophyte and picked up on Angular a few days ago. I also attempted to apply the div inside the button but it completely removed the button. Could you explain what I am doing wrong?
– Melcalc
2 hours ago
To all weary visitors, it was a surreptious oversight that had eluded me. I merely missed importing my theme in my styles.css class, and I will upload my MCV example today. One must always be vigilant for the little oversights!
styles.css(before)
(It was empty.)
styles.css(after)
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Please create an Minimal, Complete, and Verifiable example, I recommend using stackblitz.com, and post the link in your question.
– Igor
7 hours ago