Angular PrimeNG Form Checkbox Properties 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 Properties Component: It is an extension to the standard checkbox element with theming and properties are used to add some extra features to the component.

Property Used:

• 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.

Creating Angular Application & Module  Installation:

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: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: 

Example 1: In the below code, we will make use of the above properties to demonstrate the use of the Form Checkbox Properties 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 Properties 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:

Example 2: In the below code, we will make use of the above properties to demonstrate the use of the Form Checkbox Properties 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 Properties 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:

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