PrimeNG checkbox not getting checked by default

Question

I have an angular project in which I am using a PrimeNG checkbox component but there is an issue when I am trying to set the checkbox's default value to checked. I even tried binding [checked] property but I guess it is not known to p-checkbox.

HTML file

<p-checkbox name="checkboxName" [(ngModel)]="checked" 
binary="true" label="Perform Notifications"></p-checkbox>

{{checked}}

Component file

export class XYZ{
checked: boolean = true;
}

When that gets loaded, I can see value of checked variable as 'true' below in HTML page but the checkbox is blank or unchecked.

I can't reproduce your problem : https://stackblitz.com/edit/angular-etkqhd?file=app/app.component.html — Antikhippe, Jun 21 '18 at 08:01
yeah right, i figured out that my class file was overriding the default background color from blue to white so i was not able to see the sign at first. thank you for the efforts. :) — Sunil Bishnoi, Jun 21 '18 at 08:10

score 6 · Answer 1 · edited Jun 28 '20 at 22:39

6

Following code works with Angular 8.

HTML file

<p-checkbox [(ngModel)]="checked" binary="true"></p-checkbox>

.ts file

checked: boolean = true;

edited Jun 28 '20 at 22:39

Jeremy Caney

7,102
69
48
77

answered Jun 28 '20 at 21:53

Franck CHARLES

201
4
6

score 2 · Answer 2 · answered Oct 06 '21 at 14:21

For me it was none of the answers listed. If you have your checkbox in the middle of a form, you also have to give your checkbox a unique name to identify it within the form. For example:

<p-checkbox class="checkbox" name="should_renew" [(ngModel)]="myBoolean" binary="true"></p-checkbox>

Without the name, my checkbox was always false by default, regardless of its ngModel, and toggling it was not changing the boolean it was tied to.

score 0 · Answer 3 · edited Sep 24 '19 at 10:20

0

Try this. It works for me.

In .ts file:

checked: boolean = true;

In .html file:

[(ngModel)]="checked"

edited Sep 24 '19 at 10:20

miselking

3,043
4
28
39

answered Sep 24 '19 at 08:02

bahadur

24
3

PrimeNG checkbox not getting checked by default

3 Answers3