How to Add PrimeNG CheckBox in Angular

PrimeNG is rich UI components library, which helps to display UI components like CheckBox, TextBox, Buttons with nice UI formatting, it gives rich presence of the form controls on the web page, following Steps will help you to add PrimeNG checkbox in Angular Web Page:

Step 1: Create Angular application using ng new command as shown below: 

ng new PrimeNGCheckBoxApp

Step 2: After an app is created, open app in Visual Studio Code, using following command: code .

Step 3: Install PrimeNG in your app using following command:

npm install primeng --save

Step 4: Install PrimeIcons in your app using following command:

npm install primeicons --save

Step 5: Add following PrimeNG styles in angular.json file at projects => architect => build => styles section:

  "styles": [

              "src/styles.css",

               "node_modules/primeicons/primeicons.css",

              "node_modules/primeng/resources/themes/lara-light-indigo/theme.css",

               "node_modules/primeng/resources/primeng.min.css"

            ],

Step 6: Add following modules in app.module.ts file and add it in imports  of @NgModule:

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module'
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CheckboxModule } from 'primeng/checkbox';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    CheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 7: Add following code in app.component.ts file:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  hobbies: any[] = ['Swimming', 'Reading'];
}

Step 8: Add following code in app.component.html file:

<p-checkbox style="margin-bottom:10px;" [(ngModel)]="hobbies" value="Swimming" label="Swimming"></p-checkbox><br>
<p-checkbox [(ngModel)]="hobbies" value="Reading" label="Reading"></p-checkbox>

Step 9: Now run the Angular project using following command: ng serve -o