This section explains the different sizes and labels.
The CheckBox caption can be defined using the label
property. This reduces the manual addition
of label for CheckBox. You can customize the label position before or after the CheckBox
through the labelPosition
property.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<ul>
<!-- Label position - Left. -->
<li><ejs-checkbox label="Left Side Label" labelPosition="Before"></ejs-checkbox></li>
<!-- Label position - Right. -->
<li><ejs-checkbox label="Right Side Label" [checked]="true"></ejs-checkbox></li>
</ul>`
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
CheckBoxModule
],
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);
The different CheckBox size are default and small. To reduce the size of default CheckBox to small,
set the cssClass
property to e-small
.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<ul>
<!-- Small CheckBox. -->
<li><ejs-checkbox label="Small" cssClass="e-small"></ejs-checkbox></li>
<!-- Default CheckBox. -->
<li><ejs-checkbox label="Default"></ejs-checkbox></li>
</ul>`
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
CheckBoxModule
],
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);