Open In App

Angular PrimeNG Form Checkbox Events Component

Improve
Improve
Like Article
Like
Save
Share
Report

Angular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will be seeing Angular PrimeNG Form Checkbox Events Component.

The Checkbox Component provided by PrimeNG is an extension of the HTML checkbox with theming and is used to take input of boolean value from the user. There is only one event for the checkbox component, that is, when the value of the checkbox changes, the onChange event is fired.

Angular PrimeNG Form Checkbox Events Component Properties:

  • label: The label property is used to set the label of the checkbox.
  • binary: This is a boolean property and is used to save the checkbox value as a boolean.
  • ngModel: This property is used to bind a boolean variable to the value of the checkbox.

Angular PrimeNG Form Checkbox Component Events:

  • onChange: This event fires whenever the value of the checkbox changes.

Syntax:

<p-checkbox
    (onChange)="Callback-Function"
    [binary]="true | false"
    [(ngModel)]="..." 
    label="Checkbox">
</p-checkbox>

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

  • Run the below command to see the output.
ng serve --open

Example 1: In this example, we used the onChange event of the checkbox component to log the state of the checkbox whenever it is checked or unchecked.

app.component.html




<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Form 
        Checkbox Events Component
      </h3>
</div>
  
<div class="example-container">
    <div class="checkbox">
        <p-checkbox
            (onChange)="change()"
            [binary]="true"
            [(ngModel)]="checked" 
            label={{checked}}>
        </p-checkbox>
    </div>
</div>


app.component.css




div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
  
div.checkbox {
  flex-direction: row;
}
  
.header h2 {
  margin-bottom: 0;
  color: green;
}
  
label {
  margin-left: 10px;
}


app.component.ts




import { Component } from "@angular/core";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  checked: boolean = false;
  
  public change() {
    console.log(this.checked ? "Checked" : "Unchecked");
  }
}


app.module.ts




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 { CheckboxModule } from "primeng/checkbox";
  
@NgModule({
  declarations: [AppComponent],
  imports: [
    FormsModule,
    BrowserModule,
    CheckboxModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}


Output:

 

Example 2: In this example, we used the Message Component to show the state of the checkbox using the onChange event.

app.component.html




<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Form 
          Checkbox Events Component
      </h3>
</div>
  
<div class="example-container">
    <div class="checkbox">
        <p-checkbox
            (onChange)="change()"
            [binary]="true"
            [(ngModel)]="checked" 
            label={{checked}}>
        </p-checkbox>
   </div>
    <p-messages></p-messages>
</div>


app.component.css




div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
  
div.checkbox {
  flex-direction: row;
}
  
.header h2 {
  margin-bottom: 0;
  color: green;
}
  
label {
  margin-left: 10px;
}


app.component.ts




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 messageService: MessageService) {}
  checked: boolean = false;
  
  public change() {
    this.messageService.add({
      severity: this.checked ? "success" : "error",
      summary: "Value changed: ",
      detail: this.checked ? "Checked" : "Unchecked",
    });
  }
}


app.module.ts




import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { MessagesModule } from 'primeng/messages';
import { MessageModule } from 'primeng/message';
  
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { CheckboxModule } from 'primeng/checkbox';
  
@NgModule({
  declarations: [AppComponent],
  imports: [
    FormsModule,
    MessageModule,
    MessagesModule,
    BrowserModule,
    CheckboxModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}


Output:

 

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



Last Updated : 29 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads