Enable ripple for Switch label in Angular 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);