Search results

Enable ripple for Switch label in Angular Toggle Switch Button component

28 Jul 2021 / 1 minute 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.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
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);
                    }
                }
            }
    }
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);