Angular PrimeNG Form ToggleButton Styling

Angular PrimeNG Form ToggleButton Events

Last Updated : 25 Oct, 2022

Angular PrimeNG is a collection of Interactive UI components for Angular applications. Developers can use these components to make beautiful and responsive web interfaces in no time as most of the components have all the necessary functions implemented. In this article, we will be discussing Angular PrimeNG Form ToggleButton Events.

The ToggleButton component is used to take input of boolean value from the user. Its label can be changed based on its current state using the onLabel and offLabel properties. The ToggleButton triggers only one event, that is, onChange.

Angular PrimeNG Form ToggleButton Events:

onChange: A callback function can be passed to this event that is invoked when the state of the ToggleButton changes.

Syntax:

<p-toggleButton 
    [onLabel]="'...'"
    [offLabel]="'...'"
    [onIcon]="'...'"
    [offIcon]="'...'"
    (onChange)="callbackFun($event)"
    [(ngModel)]="...">
</p-toggleButton>

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, a toast message is shown to the user whenever its value is changed. We are using the onChange Event to detect the change in the value of the toggle button.

app.component.html:

HTML

<h2 style="color: green;">GeeksforGeeks</h2> 
<h3> 
    Angular PrimeNG Form 
    ToggleButton Events Component 
</h3> 
  
<p-toggleButton 
    onLabel="ON"
    offLabel="OFF"
    (onChange)="tbOnChange()" 
    [(ngModel)]="isOn"> 
</p-toggleButton> 
  
<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', 
    styleUrls: ['./app.component.css'], 
    providers: [MessageService] 
}) 
  
export class AppComponent { 
    constructor(private mService: MessageService){} 
    isOn = false; 
  
    tbOnChange() 
    { 
        this.mService.add({ 
            severity: "info", 
            summary: "ToggleButton Value Changed", 
            detail: "onChange 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 { ToastModule } from 'primeng/toast'; 
import { ToggleButtonModule } from 'primeng/togglebutton'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        FormsModule, 
        ToggleButtonModule, 
        ToastModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent], 
}) 
export class AppModule { }

Output:

Example 2: In this example, we used the onChange event of the ToggleButton and used its checked property to show or hide the text input.

app.component.html:

HTML

<h2 style="color: green;">GeeksforGeeks</h2> 
<h3> 
    Angular PrimeNG Form 
    ToggleButton Events Component 
</h3> 
  
<p-toggleButton 
    [onLabel]="'Show Input'" 
    [offLabel]="'Hide Input'" 
    [onIcon]="'pi pi-check'" 
    [offIcon]="'pi pi-times'" 
    (onChange)="tbOnChange($event)" 
    [(ngModel)]="isOn"> 
</p-toggleButton> 
<br> 
<input 
    placeholder="Enter Your Name"
    type="text" 
    pInputText  
    [hidden]="isOn"  
    style="margin-top: 30px;"
/>

app.component.ts:

Javascript

import { Component } from '@angular/core'; 
import { MessageService } from 'primeng/api'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [MessageService] 
}) 
  
export class AppComponent { 
    constructor(private mService: MessageService){} 
    isOn = false; 
    isInputVisible = false; 
  
    tbOnChange(ev: any) { 
        var val = ev.checked;  
  
        if(val) { 
            this.isInputVisible = true; 
        } else { 
            this.isInputVisible = false; 
        } 
    } 
}

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 { ToastModule } from 'primeng/toast'; 
import { InputTextModule } from 'primeng/inputtext'; 
import { ToggleButtonModule } from 'primeng/togglebutton'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        FormsModule, 
        ToggleButtonModule, 
        ToastModule, 
        InputTextModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent], 
}) 
export class AppModule { }