Angular PrimeNG Form Checkbox Label Component

Angular PrimeNG is an open-source library that consists of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see Angular PrimeNG Form Checkbox Label Component.

The Checkbox component provided by PrimeNG is an extension of the HTML checkbox with theming. The label property of the checkbox component is used to set the label text for the checkbox. The label of the checkbox is clickable and it toggles the value of the checkbox when clicked.

Angular PrimeNG Form Checkbox Label Component Properties:

• label: The label property is used to set the label text for the checkbox.
• binary: This is a boolean property and is used to save the value of the checkbox in the boolean form.
• ngModel: This property binds a boolean variable to the value of the checkbox.

Angular PrimeNG Form Checkbox Label Component Styling:

• p-disabled: This class is applied to the label by PrimeNG when the checkbox is disabled.
• p-checkbox-label-focus: This class is applied to the label by PrimeNG when the checkbox is in focus.
• p-checkbox-label-active: This class is applied to the label by PrimeNG when the checkbox is active.

Syntax:

<p-checkbox label="..."></p-checkbox>

Creating Angular Application and Installing the PrimeNG 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: This example illustrates the implementation of the Form Checkbox Label Component in Angular PrimeNG by creating a simple checkbox with a label.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>
        Angular PrimeNG Form Checkbox
        Label Component
    </h3>
</div>
<div class="example-container">
    <div class="checkbox">
        <p-checkbox [binary]="true"
                    [(ngModel)]="checked1"
                    label="Label for Checkbox">
        </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 {
  checked1: 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:

Example 2: In this example, we used the structure classes of the label element to customize its style when it is in focus, active, or in the disabled state.

app.component.html

<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>
        Angular PrimeNG Form Checkbox
        Label Component
    </h3>
</div>
<div class="example-container">
    <div class="checkbox">
        <p-checkbox [binary]="true"
                    [(ngModel)]="checked1"
                    label="Label for Checkbox">
        </p-checkbox>
    </div>
    <div class="checkbox">
        <p-checkbox [disabled]="true"
                    [binary]="true"
                    [(ngModel)]="checked2"
                    label="Label for Disabled Checkbox">
        </p-checkbox>
    </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;
}

app.component.ts

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  checked1: boolean = false;
  checked2: 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 {}

style.css

.p-checkbox-label-focus {
  color: green;
}

.p-checkbox-label-active {
  color: blue;
}

label.p-disabled {
  color: red;
}

Output:

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