Angular PrimeNG Form Checkbox Boolean Value 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 be seeing the Form Checkbox Boolean Value Component in Angular PrimeNG.
The Checkbox component provided by PrimeNG is an extension of the HTML checkbox with theming. A boolean variable can be bounded to the checkbox by using the ngModel property and by setting the binary option to true.
Angular PrimeNG Form Checkbox Boolean Value Component Properties:
- ngModel: This property is used to bound the checkbox to a boolean value.
- binary: This boolean property is used to save the value of the checkbox as a boolean value.
Syntax:
<p-checkbox [binary]="true" [(ngModel)]="boolean-var-name" label="..."></p-checkbox>
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:
Project Structure
ng serve --open
Example 1: This example shows the use of the ngModel property to bind the boolean value to the checkbox.
app.component.html
< div class = "header" >
< h2 >GeeksforGeeks</ h2 >
< h3 >Angular PrimeNG Checkbox Boolean Value Component</ h3 >
</ div >
< div class = "example-container" >
< div class = "checkbox" >
< p-checkbox [binary]="true"
inputId = "checkbox1"
[(ngModel)]="checked"
label = "Checkbox" >
</ p-checkbox >
</ div >
< div class = "btn" >
< p-button label = "Get Value"
(onClick)="getValue()">
</ p-button >
< div id = "result" >
Checkbox Value: false
</ div >
</ div >
</ div >
|
app.component.css
div {
display : flex;
align-items: center ;
justify- content : center ;
flex- direction : column;
}
div.checkbox {
flex- direction : row;
margin-bottom : 20px ;
}
.header h 2 {
margin-bottom : 0 ;
color : green ;
}
label {
margin-left : 10px ;
}
.btn,
.btn > div {
margin-top : 10px ;
}
|
app.component.ts
import { Component } from "@angular/core" ;
@Component({
selector: "app-root" ,
templateUrl: "./app.component.html" ,
styleUrls: [ "./app.component.css" ],
})
export class AppComponent {
checked: boolean = false ;
public getValue(): void {
document.querySelector( "#result" )!.innerHTML =
"Checkbox Value: " + String( this .checked);
}
}
|
app.module.ts
import { NgModule } from "@angular/core" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { ButtonModule } from "primeng/button" ;
import { FormsModule } from "@angular/forms" ;
import { CheckboxModule } from "primeng/checkbox" ;
@NgModule({
declarations: [AppComponent],
imports: [
FormsModule,
ButtonModule,
BrowserModule,
CheckboxModule,
BrowserAnimationsModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
|
Output:
Example 2: In this example, we set the label of the checkbox to the bounded variable so it gets updated automatically when the value of the variable is changed.
app.component.html
< div class = "header" >
< h2 >GeeksforGeeks</ h2 >
< h3 >
Angular PrimeNG Checkbox Boolean Value Component
</ h3 >
</ div >
< div class = "example-container" >
< div class = "checkbox" >
< p-checkbox [binary]="true"
inputId = "checkbox1"
[(ngModel)]="checked"
label={{checked}}>
</ p-checkbox >
</ div >
</ div >
|
app.component.css
div {
display : flex;
align-items: center ;
justify- content : center ;
flex- direction : column;
}
div.checkbox {
flex- direction : row;
}
.header h 2 {
margin-bottom : 0 ;
color : green ;
}
label {
margin-left : 10px ;
}
|
app.component.ts
import { Component } from "@angular/core" ;
@Component({
selector: "app-root" ,
templateUrl: "./app.component.html" ,
styleUrls: [ "./app.component.css" ],
})
export class AppComponent {
checked: boolean = false ;
}
|
app.module.ts:
import { NgModule } from "@angular/core" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { FormsModule } from "@angular/forms" ;
import { CheckboxModule } from "primeng/checkbox" ;
@NgModule({
declarations: [AppComponent],
imports: [
FormsModule,
BrowserModule,
CheckboxModule,
BrowserAnimationsModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
|
Output:
Reference: http://primefaces.org/primeng/checkbox
Last Updated :
24 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...