Angular PrimeNG Form Checkbox Basic 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 Angular PrimeNG Form Checkbox Basic Component.

The Checkbox component provided by PrimeNG is an extension of the HTML checkbox with theming. A checkbox component is generally used to take input of a boolean value.

Angular PrimeNG Form Checkbox Basic Component Properties:

• label: The label property is used to set the label of the checkbox.
• disabled: This property is used to disable the checkbox.
• binary: This boolean property is used to save the checkbox value in the boolean form.

Syntax:

<p-checkbox 
    [binary]="true | false"
    inputId="..."
    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

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 shows the use of an Angular PrimeNG Form Checkbox Basic Component.

app.component.html

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

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

• app.component.css

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 { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { CheckboxModule } from 'primeng/checkbox';

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

export class AppModule {}

Output:

Example 2: This is another example that shows how to use the disabled property of the Angular PrimeNG Form Checkbox to disable a checkbox.

app.component.html

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

<div>
    <div class="checkbox">
        <p-checkbox
            [binary]="true"
            inputId="checkbox1"
            label="Normal Checkbox">
        </p-checkbox>
    </div>

    <div class="checkbox">
        <p-checkbox
            [binary]="true"
            inputId="checkbox1"
            [disabled]="true"
            label="Disabled Checkbox">
        </p-checkbox>
    </div>
</div>

app.component.css

div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
div.checkbox{
    display: flex;
    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 { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
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