Angular 5, Html, Boolean on Checkbox Is Checked

Angular 5, HTML, boolean on checkbox is checked

try:

[checked]="item.checked"

check out: How to Deal with Different Form Controls in Angular

Toggle Angular checkbox with string values instead of boolean true/false

This solution is based on the solution link by Eliseo.

The checkbox toggles values as "optin" or "optout" when checked/unchecked and is initialized as "optin" by default in .ts file

component.html file

<form [formGroup]="optOutForm" (ngSubmit)="submitOptFormValue()">

   <div class="form-group">

   <div class="optClass">
           <input  type="checkbox" 
           [ngModel]="optOutForm.get('optOutFlag1')?.value==='optin'"
           (ngModelChange)="optOutForm.get('optOutFlag1').setValue($event?'optin':'optout')"  
           [ngModelOptions]="{standalone:true}" id="privacy">

           <label "for="privacy" id="check1">Checkbox 1</label>
  </div>

 <div class="optClass">
           <input  type="checkbox" 
           [ngModel]="optOutForm.get('optOutFlag2')?.value==='optin'"
           (ngModelChange)="optOutForm.get('optOutFlag2').setValue($event?'optin':'optout')"  
           [ngModelOptions]="{standalone:true}" id="security">

           <label "for="security" id="check1">Checkbox 2</label>
  </div>

 <div class="optClass">
           <input  type="checkbox" 
           [ngModel]="optOutForm.get('optOutFlag3')?.value==='optin'"
           (ngModelChange)="optOutForm.get('optOutFlag3').setValue($event?'optin':'optout')"  
           [ngModelOptions]="{standalone:true}" id="consent">

           <label "for="consent" id="check1">Checkbox 3</label>
  </div>
</div>
</form>

component.ts file

optOutForm:FormGroup

constructor(private fb:FormBuilder){}

ngOnInit(){
 this.optOutForm=this.fb.group({
    optOutFlag1:['optin',Validators.required],
    optOutFlag2:['optin',Validators.required],
    optOutFlag3:['optin',Validators.required]
   });
}

How to change boolean value if checkbox is cheked?

Since you have added 2 way binding in html [(ngModel)]="Personal", it should assign automatically

check via

<label>
    <input type="checkbox" name="Personal" [(ngModel)]="Personal"/>
    {{Personal}}
</label>

Check if checkbox is checked in ANGULAR 10

You can use [(ngModel)] like this:

in HTML

<input id="checkbox" type="checkbox" name="sendemail" [(ngModel)]="isChecked">

in TS

public isChecked = true;

Here is a sample showing this approach.

Note: if you are using the input in a form you should add [ngModelOptions]="{standalone: true}"

Checkbox [checked] = true not working in angular

As you can see by the following example

<input type="checkbox"  [checked]="true"> List A
<input type="checkbox" [(ngModel)]="theCheckbox" [checked]="true"> List B

The NgModel directive is higher priority from the checked property.
So you may want to exclude checked and use NgModel to do what you are trying to do.

How to POST checkbox value instead of boolean value - Angular 5

you can use the ngModelChange method to pass the value and set it to any variable you want. Refer sample code snippet below:

<label><input type="checkbox" name="footag" id="footag" value="foo" [ngModel]="finalData.tags[i]" (ngModelChange)="CheckBoxValueChange('foo',finalData)"/>foo</label>

in the component.ts file, you can access the value and set it to any variable you want:

CheckBoxValueChange(checkboxValue:string,finalData:any){
    finalData.checkboxText=checkboxValue;
    alert(checkboxValue);
}

how can I programmatically set the checkbox to true or false?

You can create a variable and toggle true or false and you can property bind that value to the [checked] property

 <label class="switch">
        <input type="checkbox" id="balanced" [(ngModel)]="balancedAmount" (click)="onNoClick($event)" [checked]="this.balancedAmount.checked">
        <span class="slider round"></span>
      </label>

this.balancedAmount.checked= true;

---

Related Topics