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.

Windstorm

I can't reproduce your problem : stackblitz.com/edit/angular-etkqhd?file=app/app.component.html – Interjection

Code seems fine, Issue might be somewhere else – Archiplasm

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. :) – Windstorm

Answer 1

Following code works with Angular 8.

HTML file

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

.ts file

checked: boolean = true;

Rahel

Answer 2

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.

Thousandfold

Answer 3

Try this. It works for me.

In .ts file:

checked: boolean = true;

In .html file:

[(ngModel)]="checked"

Remora