By default, label with ripple effect is not available in Switch. You can achieve this by using rippleMouseHandler
method.
The following example illustrates how to enable ripple effect for labels in Switch component.
import { Component, OnInit } from '@angular/core';
import { rippleMouseHandler } from '@syncfusion/ej2-buttons';
@Component({
selector: 'app-root',
template: `<div id='container'>
<table class="ripple">
<tr>
<td class="lRipple"><label for='switch1'>USB Tethering</label></td>
<td>
<ejs-switch id="switch1" [checked]="true"></ejs-switch>
</td>
</tr>
</table>
</div>`
})
export class AppComponent implements OnInit {
ngOnInit(): void {
document.querySelector('.lRipple label').addEventListener('mouseup', rippleHandler);
document.querySelector('.lRipple label').addEventListener('mousedown', rippleHandler);
function rippleHandler(e: MouseEvent): void {
let rippleSpan: Element = this.parentElement.nextElementSibling.querySelector('.e-ripple-container');
if (rippleSpan) {
rippleMouseHandler(e, rippleSpan);
}
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SwitchModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SwitchModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);