”;
The <mat-ripple>, an Angular Directive, is used to define an area depicting the user interaction.
In this chapter, we will showcase the configuration required to draw a ripple effect using Angular Material.
Following is the content of the modified module descriptor app.module.ts.
import { BrowserModule } from ''@angular/platform-browser''; import { NgModule } from ''@angular/core''; import { AppComponent } from ''./app.component''; import {BrowserAnimationsModule} from ''@angular/platform-browser/animations''; import {MatRippleModule, MatCheckboxModule, MatInputModule} from ''@angular/material'' import {FormsModule, ReactiveFormsModule} from ''@angular/forms''; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatRippleModule, MatCheckboxModule, MatInputModule, FormsModule, ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Following is the content of the modified HTML host file app.component.html.
<mat-checkbox [(ngModel)] = "centered" class = "tp-ripple-checkbox">Centered</mat-checkbox> <mat-checkbox [(ngModel)] = "disabled" class = "tp-ripple-checkbox">Disabled</mat-checkbox> <mat-checkbox [(ngModel)] = "unbounded" class = "tp-ripple-checkbox">Unbounded</mat-checkbox> <section> <mat-form-field class = "tp-ripple-form-field"> <input matInput [(ngModel)] = "radius" type = "number" placeholder = "Radius"> </mat-form-field> <mat-form-field class = "tp-ripple-form-field"> <input matInput [(ngModel)] = "color" type = "text" placeholder = "Color"> </mat-form-field> </section> <div class = "tp-ripple-container mat-elevation-z4" matRipple [matRippleCentered] = "centered" [matRippleDisabled] = "disabled" [matRippleUnbounded] = "unbounded" [matRippleRadius] = "radius" [matRippleColor] = "color"> Click me </div>
Following is the content of the modified CSS file app.component.css.
.tp-ripple-container { cursor: pointer; text-align: center; width: 300px; height: 300px; line-height: 300px; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; } .tp-ripple-checkbox { margin: 6px 12px 6px 0; } .tp-ripple-form-field { margin: 0 12px 0 0; }
Following is the content of the modified ts file app.component.ts.
import { Component } from ''@angular/core''; @Component({ selector: ''app-root'', templateUrl: ''./app.component.html'', styleUrls: [''./app.component.css''] }) export class AppComponent { title = ''materialApp''; centered = false; disabled = false; unbounded = false; radius: number; color: string; }
Result
Verify the result.
Details
-
As first, we”ve created check boxes using mat-checkbox and bind them using ngModel with variables. These properties will be used to customize the ripple.
-
Then, we”ve created the ripple and showcased its various attributes bound with variables in .ts file.
”;