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.

Answer 1

Try this. It works for me.

In .ts file:

checked: boolean = true;

In .html file:

[(ngModel)]="checked"

Answer 2

Following code works with Angular 8.

HTML file

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

.ts file

checked: boolean = true;

Answer 3

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.