The RadioButton component for Angular, users make a choice among a set of mutually exclusive, related options. Users can choose one and only one option.
npm install -g @angular/cli ng new jqwidgets-project cd jqwidgets-project
ng add jqwidgets-ng
jQWidgets UI for Angular is distributed as jqwidgets-ng NPM package
npm install jqwidgets-ng
@import 'jqwidgets-ng/jqwidgets/styles/jqx.base.css';
"styles": [ "node_modules/jqwidgets-ng/jqwidgets/styles/jqx.base.css" ]
<h3>
House Contract
</h3>
<jqxRadioButton [theme]="'fluent'" (onChange)="firstBtnOnChange($event)"
[width]="250" [height]="25" [checked]="true">
<span>12 Months Contract</span>
</jqxRadioButton>
<jqxRadioButton [theme]="'fluent'" (onChange)="secondBtnOnChange($event)"
[width]="250" [height]="25">
<span>6 Months Contract</span>
</jqxRadioButton>
<jqxRadioButton [theme]="'fluent'" (onChange)="thirdBtnOnChange($event)"
[width]="250" [height]="25">
<span>3 Months Contract</span>
</jqxRadioButton>
<jqxRadioButton [theme]="'fluent'"
[width]="250" [height]="25" [disabled]="true">
<span>1 Month Contract</span>
</jqxRadioButton>
<div style="margin-top: 10px">
<div>Events:</div>
<div #events></div>
</div>
import { Component, ViewChild, ElementRef } from '@angular/core';
import { jqxRadioButtonModule, jqxRadioButtonComponent } from 'jqwidgets-ng/jqxradiobutton';
@Component({
selector: 'app-root',
imports: [jqxRadioButtonModule],
standalone: true,
templateUrl: './app.component.html'
})
export class AppComponent {
@ViewChild('events') eventsLog: ElementRef;
count = 0;
clearLog(): void {
this.count++;
let log = this.eventsLog.nativeElement;
if (this.count >= 2) {
log.innerHTML = '';
this.count = 0;
}
}
firstBtnOnChange(event: any): void {
this.clearLog();
let log = this.eventsLog.nativeElement;
let checked = event.args.checked;
if (checked) {
log.innerHTML += '<div><span>Checked: 12 Months Contract</span></div>';
}
else {
log.innerHTML += '<div><span>Unchecked: 12 Months Contract</span></div>';
}
}
secondBtnOnChange(event: any): void {
this.clearLog();
let log = this.eventsLog.nativeElement;
let checked = event.args.checked;
if (checked) {
log.innerHTML += '<div><span>Checked: 6 Months Contract</span></div>';
} else {
log.innerHTML += '<div><span>Unchecked: 6 Months Contract</span></div>';
}
}
thirdBtnOnChange(event: any): void {
this.clearLog();
let log = this.eventsLog.nativeElement;
let checked = event.args.checked;
if (checked) {
log.innerHTML += '<div><span>Checked: 3 Months Contract</span></div>';
} else {
log.innerHTML += '<div><span>Unchecked: 3 Months Contract</span></div>';
}
}
}