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" > w3wiki </ 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" > w3wiki </ 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: