This section explains how to create a simple RadioButton, and demonstrate the basic usage of the RadioButton module in an Angular environment.
The following list of dependencies are required to use the RadioButton module in your application.
|-- @syncfusion/ej2-angular-buttons
|-- @syncfusion/ej2-angular-base
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-buttons
You can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.
npm install -g @angular/cli
Start a new Angular application using below Angular CLI command.
ng new my-app
cd my-app
To install RadioButton package, use the following command.
npm install @syncfusion/ej2-angular-buttons --save
Import RadioButton module into Angular application(app.module.ts) from the package
@syncfusion/ej2-angular-buttons
.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// Imported Syncfusion radiobutton module from buttons package.
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule, RadioButtonModule ], // Registering EJ2 RadioButton Module.
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Modify the template in app.component.ts
file to render the RadioButton component.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<!-- To Render RadioButton. -->
<ejs-radiobutton label="Default"></ejs-radiobutton>`
})
export class AppComponent { }
Add RadioButton component’s styles as given below in style.css
.
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
Run the application in the browser using the following command:
ng serve
The below example shows a basic RadioButton component,
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<ul>
<!-- To Render RadioButton. -->
<li><ejs-radiobutton label="Option 1" name="default"></ejs-radiobutton></li>
<li><ejs-radiobutton label="Option 2" name="default" checked="true"></ejs-radiobutton></li>
</ul>`
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
RadioButtonModule
],
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 Essential JS 2 RadioButton contains 2 different states visually, they are as follows:
The RadioButton checked
property is used to handle the checked and unchecked state.
In the checked state an inner circle will be added to the visualization of RadioButton.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<ul>
<!-- checked state. -->
<li><ejs-radiobutton label="Option 1" name="state" checked="true"></ejs-radiobutton></li>
<!-- unchecked state. -->
<li><ejs-radiobutton label="Option 2" name="state"></ejs-radiobutton></li>
</ul>`
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';
import { AppComponent } from './app.component';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
RadioButtonModule
],
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);