Angular PrimeNG Form RadioButton Events Component

Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will see Angular PrimeNG Form RadioButton Events Component.

The PrimeNG Form Component is built on top of the HTML radio input element with theming. The label property of the RadioButton component can be used to provide a label for the radio input. The events of the RadioButton are listed below.

Angular PrimeNG Form RadioButton Events:

• onClick: A callback function can be this event that is invoked when the user clicks the radio button.
• onFocus: A callback function can be this event that is invoked when the radio button gets focused.
• onBlur: A callback function can be this event that is invoked when the radio button loses focus.

Angular PrimeNG Form RadioButton Events Properties:

• name: It is the name of the radio group.
• value: It is the value of the radio button. The default value is null.
• label: This is the label of the radio button.
• disabled: It is a boolean property that when present, disables the radio button.
• tabindex: It is the index of the element in tabbing order.
• inputId: It is the ID of the focus input to match the label of the component

Syntax:

<p-radioButton
    name="..."
    (Event-Name)="Callback()"
    value="..." 
    inputId="..."
    [label]="'...'" 
    [(ngModel)]="...">
</p-radioButton>

Creating Angular Application and Installing the Module:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: In this example, we used the onFocus and onBlur events of the RadioButton to show a toast message when a radio button gets or loses focus.

• app.component.html

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    RadioButton Properties Component
</h3>

<h4 class="mb-0">Are you a student?</h4>
<div>
    <p-radioButton name="group1"
                   (onFocus)="radio1Focus()"
                   (onBlur)="radio1Blur()"
                   value="YES"
                   inputId="rad1"
                   [label]="'Yes'"
                   [(ngModel)]="group1">
    </p-radioButton>
</div>

<div>
    <p-radioButton name="group1"
                   (onFocus)="radio2Focus()"
                   (onBlur)="radio2Blur()"
                   value="NO"
                   inputId="rad2"
                   [label]="'No'"
                   [(ngModel)]="group1">
    </p-radioButton>
</div>

<p-toast></p-toast>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { Message, MessageService } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `
        :host ::ng-deep p-radioButton {
            margin-top: 15px;
        }
        `
    ],
    providers: [MessageService]
})

export class AppComponent {
    constructor(private mService: MessageService) { }
    group1?: string;

    radio1Focus() {
        this.mService.add({
            severity: "success",
            summary: "Option1 In Focus",
            detail: "onFocus Event Triggered"
        })
    }

    radio1Blur() {
        this.mService.add({
            severity: "error",
            summary: "Option1 Out of Focus",
            detail: "onBlur Event Triggered"
        })
    }


    radio2Focus() {
        this.mService.add({
            severity: "success",
            summary: "Option2 In Focus",
            detail: "onFocus Event Triggered"
        })
    }

    radio2Blur() {
        this.mService.add({
            severity: "error",
            summary: "Option2 Out of Focus",
            detail: "onBlur Event Triggered"
        })
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { RadioButtonModule }
    from 'primeng/radiobutton';
import { ToastModule } from 'primeng/toast';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        RadioButtonModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: In this example, we used the onClick event of the RadioButton to detect when the user clicks on the radio button and shows a toast message.

• app.component.html

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    RadioButton Properties Component
</h3>

<h4 class="mb-0">Are you a student?</h4>
<div>
    <p-radioButton name="group1"
                   (onClick)="radio1Click()"
                   value="YES"
                   inputId="rad1"
                   [label]="'Yes'"
                   [(ngModel)]="group1">
    </p-radioButton>
</div>

<div>
    <p-radioButton name="group1"
                   (onClick)="radio2Click()"
                   value="NO"
                   inputId="rad2"
                   [label]="'No'"
                   [(ngModel)]="group1">
    </p-radioButton>
</div>
<p-toast></p-toast>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { MessageService} from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `
        :host ::ng-deep p-radioButton {
            margin-top: 15px;
        }
        `
    ],
    providers: [MessageService]
})

export class AppComponent {
    constructor(private mService: MessageService){}
    group1?: string;

    radio1Click()
    {
        this.mService.add({
            severity: "success",
            summary: "Option1 Clicked",
            detail: "onClick Event Triggered"
        })
    }

    radio2Click() {
        this.mService.add({
            severity: "info",
            summary: "Option2 Clicked",
            detail: "onClick Event Triggered"
        })
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { RadioButtonModule }
    from 'primeng/radiobutton';
import { ToastModule } from 'primeng/toast';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        RadioButtonModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/radiobutton