Search results

Change Size in Angular Switch component

The different Switch sizes available are default and small. To reduce the size of default Switch to small, set the cssClass property to e-small.

Source
Preview
app.component.ts
app.module.ts
main.ts
styles.css
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `<table class='size'>
                <tr>
                    <td class='lSize'>Small</td>
                    <td>
                        <ejs-switch cssClass="e-small"></ejs-switch>
                    </td>
                </tr>
                <tr>
                    <td class='lSize'>Default</td>
                    <td>
                        <ejs-switch></ejs-switch>
                    </td>
                </tr>
               </table>`
})

export class AppComponent { }
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);
#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: "Helvetica Neue", "calibri";
  font-size: 16px;
  top: 45%;
  left: 45%;
}

.size tr td {
  padding: 10px;
}

.size .lSize {
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  font-size: 13px;
}