Open In App

Angular PrimeNG Form Checkbox Basic Component

Last Updated : 15 Aug, 2022
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

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 Basic Component.

The Checkbox component provided by PrimeNG is an extension of the HTML checkbox with theming. A checkbox component is generally used to take input of a boolean value.

Angular PrimeNG Form Checkbox Basic Component Properties:

  • label: The label property is used to set the label of the checkbox.
  • disabled: This property is used to disable the checkbox.
  • binary: This boolean property is used to save the checkbox value in the boolean form.

Syntax:

<p-checkbox 
    [binary]="true | false"
    inputId="..."
    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

The project Structure will look like this after following the above steps:

Project Structure

Run the below command to see the output.

ng serve --open

Example 1: This example shows the use of an Angular PrimeNG Form Checkbox Basic Component.

app.component.html




<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Checkbox Basic Component</h3>
</div>
  
<div class="checkbox">
    <p-checkbox 
        [binary]="true"
        inputId="checkbox1"
        [(ngModel)]="checked" 
        label={{checked}}>
    </p-checkbox>
</div>


  • app.component.css

CSS




div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
div.checkbox{
    flex-direction: row;
}
  
.header h2{
    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 { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { CheckboxModule } from 'primeng/checkbox';
  
@NgModule({
  declarations: [AppComponent],
  imports: [
    FormsModule,
    BrowserModule,
    CheckboxModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
  
export class AppModule {}


Output:

 

Example 2: This is another example that shows how to use the disabled property of the Angular PrimeNG Form Checkbox to disable a checkbox.

app.component.html




<div class="header">
    <h2>GeeksforGeeks</h2>
    <h3>Angular PrimeNG Checkbox Basic Component</h3>
</div>
  
<div>
    <div class="checkbox">
        <p-checkbox 
            [binary]="true" 
            inputId="checkbox1" 
            label="Normal Checkbox">
        </p-checkbox>
    </div>
    
    <div class="checkbox">
        <p-checkbox 
            [binary]="true" 
            inputId="checkbox1" 
            [disabled]="true" 
            label="Disabled Checkbox">
        </p-checkbox>
    </div>
</div>


app.component.css




div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
div.checkbox{
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}
  
.header h2{
    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 {
    checked1: boolean = false;
    checked2: boolean = false;
}


app.module.ts




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



Previous Article
Next Article

Similar Reads

Angular PrimeNG Form Checkbox Label Component
Angular PrimeNG is an open-source library that consists of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see Angular PrimeNG Form Checkbox Label Component. The Checkbox component provided by PrimeNG is an extension of the HTML checkbo
4 min read
Angular PrimeNG Form TreeSelect Checkbox Component
Angular PrimeNG is an open-source front-end UI framework developed by PrimeTek for developing efficient and scalable angular applications. Using PrimeNG in their projects helps developers to cut down the development time and focus on other important areas of the application. In this article, we will be seeing the Angular PrimeNG Form TreeSelect Che
4 min read
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
3 min read
Angular PrimeNG Form Checkbox Events Component
Angular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will be seeing Angular PrimeNG Form Checkbox Events Component. The Checkbox Component provided by PrimeNG is an extension of the HTML checkbox with theming and is used
4 min read
Angular PrimeNG Form InputGroup Checkbox and RadioButton Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will learn how to use the InputGroup Checkbox and RadioButton Component in Angular PrimeNG. The InputGroup Component allows a user
3 min read
Angular PrimeNG Form Checkbox Properties Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the calendar component in angular ngx bootstrap. Checkbox Properties Component: It is an extension to the standar
4 min read
Angular PrimeNG Form Checkbox Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the calendar component in angular ngx bootstrap. Checkbox Component: It is an extension to the standard checkbox
5 min read
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
3 min read
Angular PrimeNG Form Slider Basic Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use the Slider Basic Component in Angular PrimeNG. The Slider Component facilitates an input element that accepts
2 min read
Angular PrimeNG Form Chips Basic Component
Angular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will discuss Angular PrimeNG Form Chips Basic Component. A Chip Component is used to take input of multiple values in a single input field. The most common example whe
3 min read
Angular PrimeNG Form Dropdown Basic Component
Angular PrimeNG is an open-source front-end UI framework developed by PrimeTek for developing efficient and scalable angular applications. Using PrimeNG in their projects helps developers to cut down the development time and focus on other important areas of the application. In this article, we will see Angular PrimeNG Form Dropdown Basic Component
3 min read
Angular PrimeNG Form Inputtext Basic Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will learn how to use the InputText Basic Component in Angular PrimeNG. Let’s learn about the properties, and syntaxes that will b
3 min read
Angular PrimeNG Form Password Basic Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will learn how to use the Password Basic Component in Angular PrimeNG. The Password Component is used to represent the strength in
3 min read
Angular PrimeNG Form ToggleButton Basic Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the ToggleButton Basic Component in Angular PrimeNG. The ToggleButton Component is used to make a button that
3 min read
Angular PrimeNG Form Rating Basic Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the Form Rating Basic component in Angular PrimeNG. Let’s learn about the properties, along with their syntax
3 min read
Angular PrimeNG Form InputSwitch Basic Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will learn how to use the Form InputSwitch Basic Component in Angular PrimeNG. We will learn about the properties, along with thei
3 min read
Angular PrimeNG Form RadioButton Basic Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use the Form RadioButton Basic Component in Angular PrimeNG. The RadioButton Component allows the user to select o
3 min read
Angular PrimeNG Form CascadeSelect Basic Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use TreeTable Column Resize in Angular PrimeNG. Angular PrimeNG Form CascadeSelect Basic is used to display a nested
4 min read
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 pro
3 min read
Angular PrimeNG Button Basic Component
Angular PrimeNG is an open-source front-end UI library that has many native Angular UI components which help developers to build a fast and scalable web solution. In this article, we will see Angular PrimeNG Button Basic Component. A Button component is used for carrying out some action when clicked. The basic button refers to the simplest button p
3 min read
Onsen UI CSS Component Basic Checkbox
Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. Checkboxes are used for instances where a user may wish to select multiple options, such as in the instance of a “check all that apply” question, in forms. Onsen UI CSS Co
2 min read
Angular PrimeNG Form Editor Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use the Form Editor Component in Angular PrimeNG. The Form Editor is a Quill-based rich text editor component. The
3 min read
Angular PrimeNG Form SelectButton Custom Content Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the Angular PrimeNG Form SelectButton Custom Content Component. Form SelectButton Custom Content: Create an n
3 min read
Angular PrimeNG Form TreeSelect Chips Display Component
Angular PrimeNG is an open-source library that consists of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will be seeing the Angular PrimeNG Form TreeSelect Chips Display Component. Form TreeSelect Chips Display: The items that have been se
4 min read
Angular PrimeNG Form InputMask SlotChar Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Form InputMask SlotChar Component in Angular PrimeNG. We will also learn about the various properties and syn
3 min read
Angular PrimeNG Form Slider Step Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use the Slider Step Component in Angular PrimeNG. The Slider Component is an element of input that accepts numeric
3 min read
Angular PrimeNG Form InputNumber Events Component
Angular PrimeNG is a UI component catalog for angular applications. It consists of a wide range of UI components that help in making fast and scalable websites. This article will see the Angular PrimeNG Form InputNumber Events Component. The Form InputNumber Component is used to take numerical input from the user. The InputNumber component can be b
3 min read
Angular PrimeNG Form Calendar Multiple Months Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use the Calendar Form with the Multiple Months component in Angular PrimeNG. The Calendar component can be used to
3 min read
Angular PrimeNG Form Calendar Year Picker Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Calendar Form Year Picker component in Angular PrimeNG. Calendar component: It is used to display a month-wis
3 min read
Angular PrimeNG Form Calendar Month Picker Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Calendar Form Month Picker component in Angular PrimeNG. Calendar component: It is used to display a month-wi
3 min read
three90RightbarBannerImg