Angular PrimeNG Form Checkbox Multiple 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 see the Angular PrimeNG Form Checkbox Multiple Component.

The Checkbox Component provided by PrimeNG is an extension of the HTML checkbox with theming. A multiple-checkbox component can also be created by specifying the .field-checkbox class

Syntax:

<div class="field-checkbox">
   <p-checkbox [(ngModel)]="..." 
                  inputId="GFG" >
       </p-checkbox>
    <label for="GFG">...</label>
</div>
<div class="field-checkbox">
   <p-checkbox [(ngModel)]="..." 
                  inputId="GFG2" >
       </p-checkbox>
    <label for="GFG2">...</label>
</div>
<div class="field-checkbox">
   <p-checkbox [(ngModel)]="..." 
                  inputId="GFG3" >
       </p-checkbox>
    <label for="GFG3">...</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 Multiple Component.

• app.component.html:

HTML

<h1 style="color: green">
  GeeksforGeeks
</h1>
<h5>
      Angular PrimeNG Form Checkbox
    Multiple Component.
</h5>

<div class="p-field-checkbox">
    <p-checkbox value="JavaScript"
                inputId="js">
    </p-checkbox>
    <label for="js">JavaScript</label>
</div>

<div class="p-field-checkbox">
    <p-checkbox value="React"
                inputId="react">
      </p-checkbox>
    <label for="react">React JS</label>
</div>

<div class="p-field-checkbox">
    <p-checkbox value="Angular"
                inputId="angular">
    </p-checkbox>
    <label for="angular">
          Angular JS
      </label>
</div>

<div class="p-field-checkbox">
    <p-checkbox value="Node"
                inputId="node">
    </p-checkbox>
    <label for="node">Node JS</label>
</div>

• app.component.ts:

Javascript

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

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

export class AppComponent { }

• app.component.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 that illustrates the use of Angular PrimeNG Form Checkbox Multiple Component.

• app.component.html:

HTML

<h1 style="color: green">
  GeeksforGeeks
</h1>
<h5>
      Angular PrimeNG Form
      Checkbox Multiple Component.
</h5>

<div class="p-field-checkbox">
    <p-checkbox value="dsa"
                inputId="dsa">
    </p-checkbox>
    <label for="dsa">
          DSA Self-Paced
      </label>
</div>

<div class="p-field-checkbox">
    <p-checkbox  isabled='true'
                 value="system design"
                 inputId="system design">
      </p-checkbox>
    <label for="system design">
        System Design
        <b><i>--Disabled</i></b>
    </label>
</div>

<div class="p-field-checkbox">
    <p-checkbox value="c++stl"
                inputId="c++stl">
    </p-checkbox>
    <label for="c++stl">C++ STL</label>
</div>

<div class="p-field-checkbox">
    <p-checkbox value="webdev"
                inputId="webdev">
    </p-checkbox>
    <label for="webdev">Web Development</label>
</div>

• app.component.ts:

Javascript

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

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

export class AppComponent { }

• 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