Angular PrimeNG Form InputSwitch Events Component

Angular PrimeNG is a collection of UI components made for Angular applications. It makes it easy for developers to build beautiful and efficient web interfaces without investing a lot of time. In this article, we will be seeing the Angular PrimeNG Form InputSwitch Events Component.

The InputSwitch Component is used to take a boolean input from the user. It has two states, on and off. It can be turned on initially by binding its value with a boolean variable set to true. There is only one event associated with the InputSwitch component which is given below.

Angular PrimeNG Form InputSwitch Events:

• onChange: This event of InputSwitch accepts a callback that is triggered when the state of the switch changes.

Syntax:

<p-inputSwitch
    (onChange)="callback()"
    [(ngModel)]="switch1">
</p-inputSwitch>

Creating Angular application and Installing the Modules:

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

ng new myapp

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

cd myapp

Step 3: Install PrimeNG in your given directory.

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

Project Structure: After completing the above steps, the structure will look like the following.

Project Structure

Example 1: In this example, we show a toast message whenever the onChange event of the InputSwitch triggers.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form <br>
    InputSwitch Events Component
</h3>

<p-inputSwitch
    (onChange)="switchOnChange()"
    [(ngModel)]="switch1">
</p-inputSwitch>

<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) { }
    switch1: boolean = false;

    switchOnChange() {
        this.mService.add({
            severity: "success",
            summary: "InputSwitch 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 { InputSwitchModule }
    from 'primeng/inputswitch';
import { ToastModule } from 'primeng/toast';

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

Output:

Example 2: In this example, whenever the value of the switch changes, we check its current value and show the rating bar if the current value is true otherwise the rating bar will be hidden.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form <br>
    InputSwitch Events Component
</h3>

<p-inputSwitch
    (onChange)="switchOnChange($event)"
    [(ngModel)]="switchValue">
</p-inputSwitch>

<p-rating
    [cancel]="false"
    [hidden]="isRatingHidden"
    [(ngModel)]="rating">
</p-rating>

• app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    switchValue: boolean = false;
    isRatingHidden = true;
    rating: number = 4;

    switchOnChange(e: any) {
        var value = e.checked;
        if (value) {
            this.isRatingHidden = false;
        } else {
            this.isRatingHidden = true;
        }
    }
}

• 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 { InputSwitchModule }
    from 'primeng/inputswitch';
import { RatingModule } from 'primeng/rating';

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

Output:

Reference: https://www.primefaces.org/primeng/inputswitch