Angular PrimeNG Form Checkbox Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the calendar component in angular ngx bootstrap.

Checkbox Component: It is an extension to the standard checkbox element with theming.

Syntax:

 <p-checkbox>...</p-checkbox>

Properties:

• name: This property is used to define the name of the checkbox group.
• value: This property is used to define the value of the checkbox.
• label: This property is used to define the label of the checkbox.
• disabled: This property is used to specify that the element should be disabled.
• binary: This property is used to select a boolean value instead of multiple values.
• tabindex: This property is used to define the index of the element in tabbing order.
• inputId: This property is used to define the identifier of the focus input to match a label defined for the component.
• ariaLabelledBy: This property is used to establish relationships between the component and label(s) where its value should be one or more element IDs.
• ariaLabel: This property is used to define a string that labels the input element.
• style: This property is used to inline the style of the component.
• styleClass: This property is used to style the class of the component.
• labelStyleClass: This property is used to style the class of the label.
• checkboxIcon: This property is used for the Icon class of the checkbox icon.
• readonly: This property is used to specify that the component cannot be edited.
• required: This property is used to specify that checkbox must be checked before submitting the form.
• trueValue: This property is used to see whether the check box is in the checked state or not.
• falseValue: This property is used to see whether the check box is in the checked state or not.

Events:

• onChange: It is used to invoke on checkbox click.

Methods:

• focus: This method is used to apply focus.

Styling:

• p-checkbox: This styling is used to define the container element.
• p-checkbox-box: This styling is used to define the container of icon.
• p-checkbox-icon: This styling is used to define the icon element.
• p-checkbox-label: This styling is used to define the label element.
• p-label-active: This styling is used to define the label element of a checked state.
• p-label-focus: This styling is used to define the label element of a focused state.
• p-label-disabled: This styling is used to define the Label element of a disabled state.
  

Example 1: In the below code, we will use the above properties to demonstrate the use of the Angular PrimeNG Form Checkbox Component.

app.component.html

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form Checkbox Component</h4>
    <h5>Basic</h5>
    <div class="p-field-checkbox">
        <p-checkbox [(ngModel)]="checked"
            binary="true" inputId="binary">
        </p-checkbox>
        <label for="binary">{{checked}}</label>
    </div>
</div>

app.component.ts

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    selectedCities: string[] = [];

    selectedCategories: any[] = ['Technology', 'Sports'];

    categories: any[] = [
        { name: 'Accounting', key: 'A' },
        { name: 'Marketing', key: 'M' },
        { name: 'Production', key: 'P' },
        { name: 'Research', key: 'R' }
    ];

    checked: boolean = false;

    ngOnInit() {
        this.selectedCategories = this.categories.slice(1, 3);
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { CheckboxModule } from 'primeng/checkbox';

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

export class AppModule { }

Output:

Example 2: In the below code, we will use the above properties to demonstrate the use of the Angular PrimeNG Form Checkbox Component.

app.component.html

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form Checkbox Component</h4>
    <h5>Multiple</h5>
    <div class="p-field-checkbox">
        <p-checkbox name="group1" value="New York"
            [(ngModel)]="selectedCities" inputId="ny">
        </p-checkbox>
        <label for="ny">Nallasopara</label>
    </div>
    <div class="p-field-checkbox">
        <p-checkbox name="group1" value="San Francisco"
            [(ngModel)]="selectedCities" inputId="sf">
        </p-checkbox>
        <label for="sf">Dadar</label>
    </div>
    <div class="p-field-checkbox">
        <p-checkbox name="group1" value="Los Angeles"
            [(ngModel)]="selectedCities" inputId="la">
        </p-checkbox>
        <label for="la">Varanasi</label>
    </div>
    <div class="p-field-checkbox">
        <p-checkbox name="group1" value="Chicago"
            [(ngModel)]="selectedCities" inputId="ch">
        </p-checkbox>
        <label for="ch">Ayodhya</label>
    </div>
</div>

app.component.ts

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    selectedCities: string[] = [];

    selectedCategories: any[] = ['Technology', 'Sports'];

    categories: any[] = [
        { name: 'Accounting', key: 'A' },
        { name: 'Marketing', key: 'M' },
        { name: 'Production', key: 'P' },
        { name: 'Research', key: 'R' }
    ];

    checked: boolean = false;

    ngOnInit() {
        this.selectedCategories = this.categories.slice(1, 3);
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { CheckboxModule } from 'primeng/checkbox';

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

export class AppModule { }

Output:

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