Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
The name attribute of the Switch is used to group Switches. When the Switches are grouped in form, the checked items
value attribute will post to the server on form submit. The disabled and unchecked Switch values will not be sent to
the server on form submit.
In the following code snippet, USB and Wi-Fi in the checked state, and Bluetooth is in disabled state.
Values that are in checked state only be sent on form submit.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<form><table class='size'>
<tr>
<td class='lSize'>USB</td>
<td>
<ejs-switch name= "Tethering" value= "USB" [checked]="true" ></ejs-switch>
</td>
</tr>
<tr>
<td class='lSize'>Wi-Fi</td>
<td>
<ejs-switch name= "Hotspot" value= "Wi-Fi" [checked]="true" ></ejs-switch>
</td>
</tr>
<tr>
<td class='lSize'>Bluetooth</td>
<td>
<ejs-switch name= "Tethering" value= "Bluetooth" [disabled]="true" ></ejs-switch>
</td>
</tr>
<tr>
<td>
<button ejs-button [isPrimary]="true">Submit</button>
</td>
</tr>
</table></form>`
})
export class AppComponent { }import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SwitchModule, ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SwitchModule,
ButtonModule
],
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);