Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 20 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads