Set default state of a checkbox

[chriscurnow]

This seems like a really stupid question but I just can't find the answer anywhere.

I want to set the initial state of a checkbox based the initial state of the data object.

Eg the data object may have an attribute "isAvailable" so I want to set the checkbox to match the value of isAvailable.

The problem I am having is that to set the initial state of a check box to checked you add the "checked" attribute to the form control.

(This seems silly as it would seem better to have used checked="true" as you can read the value of the checkbox by reading its "checked" value. Anyway that's not the way it is.)

So it looks like I would have to do an NgIf.

I'm sure there must be an easier way but I just can't find it.

[PatrickJS]

have you tried <input type="checkbox" [attr.checked]="isAvailable">

[chriscurnow]

I hadn't tried it but I tried it just then and it didn't work:(
It's not too hard to do it with ngIf and I could even create a component to do it. It just seemed like there should be an easier way.

[PatrickJS]

here's a plnkr where I have it working
http://plnkr.co/edit/Hxy5Jz?p=preview

[chriscurnow]

Well there you go. I must have been doing something wrong. I'll try again.

Thanks for taking the time to set up the demo. I really appreciate it.

[julioaze]

Hello, how could I make sure all checked checkboxes (isAvailable = true) are cleared at the click of the button?
I tried with your example, but isAvailable only has the state = true if you use (change) and in this case, when checking any checkbox, all others with [checked] = "isAvailable" are checked.
I need to check some random checkboxes and then uncheck the button click.
Any help will be appreciated

[NabinKhatiwada]

julioaze , u need to create different variable for each check box. It will work . Example;

.ts:
private isAppUser = true;
private isUser = true;
html:
<input type="checkbox" [checked]="isAppUser" value="isAppUser" (change)="isAppUser = $event.target.checked" formControlName="appUserFlag">

<input type="checkbox" [checked]="isUser" value="isUser" (change)="isUser= $event.target.checked" formControlName="aaa">

[Seanmclem]

In Angular 2+, If you're using template forms and/or ngModel then you can set default checkbox values right in the model you declare. When declaring the boolean values do something like this:

    isPublished: boolean = false;
    //or
    isFeatured: boolean= true;

when you load up the form with undefined values -they will default to what you set in the model

[sksandeep087]

Hello, Sir
Can you Help me , I want to use multiple checkBox byDefault selected.

[saimzishan]

<ng-container *ngFor="let opt of option_set_ids">
<checkbox [checked]='true' [value]="opt.id">{{opt.value}}