Enable ripple for switch label in Angular Switch component

27 Sep 20234 minutes to read

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 class="e-section-control">
                <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>
            </div>`

})

export class AppComponent implements OnInit {
    parentElement: any;
    ngOnInit(): void {
        const rippleHandler = (e: MouseEvent): void =>  {
            let rippleSpan: Element = this.parentElement.nextElementSibling.querySelector('.e-ripple-container') as Element;
            if (rippleSpan) {
                rippleMouseHandler(e, rippleSpan);
            }
        }
                (document as any).querySelector('.lRipple label')!.addEventListener('mouseup', rippleHandler);
                (document as any).querySelector('.lRipple label')!.addEventListener('mousedown', rippleHandler);

            }
    }
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';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);