Angular PrimeNG Form Checkbox Boolean Value 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 be seeing the Form Checkbox Boolean Value Component in Angular PrimeNG.

The Checkbox component provided by PrimeNG is an extension of the HTML checkbox with theming. A boolean variable can be bounded to the checkbox by using the ngModel property and by setting the binary option to true.

Angular PrimeNG Form Checkbox Boolean Value Component Properties:

• ngModel: This property is used to bound the checkbox to a boolean value.
• binary: This boolean property is used to save the value of the checkbox as a boolean value.

Syntax:

<p-checkbox [binary]="true" [(ngModel)]="boolean-var-name" label="..."></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:

ng serve --open

Example 1: This example shows the use of the ngModel property to bind the boolean value to the checkbox.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Checkbox Boolean Value Component</h3>
</div>

<div class="example-container">
    <div class="checkbox">
        <p-checkbox [binary]="true"
            inputId="checkbox1"
            [(ngModel)]="checked"
            label="Checkbox">
        </p-checkbox>
    </div>

    <div class="btn">
        <p-button label="Get Value"
                  (onClick)="getValue()">
        </p-button>
        <div id="result">
            Checkbox Value: false
        </div>
    </div>
</div>

app.component.css

div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

div.checkbox {
  flex-direction: row;
  margin-bottom: 20px;
}

.header h2 {
  margin-bottom: 0;
  color: green;
}

label {
  margin-left: 10px;
}

.btn,
.btn > div {
  margin-top: 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;

  /*Method to retrieve the value of checkbox*/
  public getValue(): void {
    document.querySelector("#result")!.innerHTML =
      "Checkbox Value: " + String(this.checked);
  }
}

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 { ButtonModule } from "primeng/button";
import { FormsModule } from "@angular/forms";
import { CheckboxModule } from "primeng/checkbox";

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

Output:

Example 2: In this example, we set the label of the checkbox to the bounded variable so it gets updated automatically when the value of the variable is changed.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>
          Angular PrimeNG Checkbox Boolean Value Component
      </h3>
</div>

<div class="example-container">
    <div class="checkbox">
        <p-checkbox [binary]="true"
                    inputId="checkbox1"
                    [(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;
}

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:

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