Angular PrimeNG Form Checkbox Dynamic Values, Preselection, Value Binding and Disabled Option

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 Dynamic Values, Preselection, Value Binding, and Disabled Option Component.

The Checkbox Component provided by PrimeNG is an extension of the HTML checkbox with theming. There are various options, i.e., the Dynamic Values, Preselection, Value Binding, and Disabled Option, that can be implemented in the Form Checkbox.

Syntax:

<div *ngFor="..." 
     class="field-checkbox">
   <p-checkbox [value]="GFG"  
                  [(ngModel)]="..." 
                  [inputId]="GFG.course" 
                  [disabled]="GFG.course === 'G'">
   </p-checkbox>
   <label [for]="GFG.key">
           {{GFG.course}}
   </label>
</div>

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:

• Steps to run the app: Run the below command to see the output

ng serve --open

Example 1: In the below code, we will use the above properties to demonstrate the use of the Angular PrimeNG Form Checkbox Dynamic Values, Preselection, Value Binding, and Disabled Option Component.

• app.component.html:

HTML

<h1 style="color: green">
  GeeksforGeeks
</h1>

<h5>
    Angular PrimeNG Form Checkbox
    Dynamic Values, Preselection,
    Value Binding and
    Disabled Option Component.
</h5>

<div *ngFor="let gfg of GfG"
     class="p-field-checkbox">
    <p-checkbox name="group2"
                value="gfg"
                [value]="gfg"
                [disabled]="gfg.key === 'b'"
                [inputId]="gfg.key">
    </p-checkbox>
    <label [for]="gfg.key">
          {{gfg.name}}
      </label>
</div>

• app.component.ts:

Javascript

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent {
    GfG: any[] = [
      {name: 'JavaScript', key: 'a'},
      {name: 'React JS--disabled', key: 'b'},
      {name: 'Angular JS', key: 'c'},
      {name: 'Node JS', key: 'd'}
    ];
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
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: Below is another example code that illustrates the use of Angular PrimeNG Form Checkbox Dynamic Values, Preselection, Value Binding, and Disabled Option Component using a field to be disabled.

• app.component.html:

HTML

<h1 style="color: green">
  GeeksforGeeks
</h1>

<h5>
    Angular PrimeNG Form Checkbox
    Dynamic Values, Preselection,
    Value Binding and
    Disabled Option Component.
</h5>

<div *ngFor="let gfg of GfG"
     class="p-field-checkbox">
    <p-checkbox name="group2"
                value="gfg"
                [value]="gfg"
                [disabled]="gfg.key === 'c'"
                [inputId]="gfg.key"
                [(ngModel)]="selectedCourses">
    </p-checkbox>
    <label [for]="gfg.key">
          {{gfg.name}}
      </label>
</div>

• app.component.ts:

Javascript

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})

export class AppComponent {
    selectedCourses: any[];
    GfG: any[] = [
      {name: 'DSA Self-Paced', key: 'a'},
      {name: 'System Design', key: 'b'},
      {name: 'DBMS--diabled', key: 'c'},
      {name: 'Web Development', key: 'd'}
    ];
    ngOnInit() {
      this.selectedCourses = this.GfG.slice(0,2);
    }
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
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