Angular 2: Default checked on checkbox in ngFor

angular 6 checkbox checked
angular 7 checkbox checked event
angular 7 checkbox example
angular 6: get values of multiple checked checkboxes
ngmodel checkbox angular 6
how to get multiple checkbox value in angular 6
angular checkbox checked by default
dynamic checkbox in angular 7

I'm trying to set default value as checked on a checkbox inside my ngFor. This is my array of checkbox items:

tags = [{
  name: 'Empathetic',
  checked: false
}, {
  name: 'Smart money',
  checked: true
}, {
  name: 'Minimal help after writing check',
  checked: false
}, {
  name: 'Easy term sheet',
  checked: true
}];

This is my html

<div class="form-group">
  <div class="form-check" *ngFor="let tag of tags;">
    <label class="form-check-label" for="tag{{tag.value}}">
      <input
        class="form-check-input"
        type="checkbox"
        id="tag{{tag.value}}"
        name="tagOptions"
        [(ngModel)]="tag.checked">
      {{tag.name}}
    </label>
  </div>
</div>

The desired result is to get 2 checked, and 2 unchecked boxes, but all of them are unchecked. I've also tried different variations with [checked]="tag.checked", but it didn't seem to do the trick.

This solved my problem with the checked/unchecked checkboxes, while I still had control over changes in my variables.

HTML

<div class="form-group">
  <div class="form-check" *ngFor="let tag of tags; let i = index;">
    <label class="form-check-label" for="tag{{tag.value}}">
      <input
        class="form-check-input"
        type="checkbox"
        id="tag{{tag.value}}"
        name="tagOptions"
        (change)="changeCheckbox(i)"
        [checked]="tag.checked">
      {{tag.name}}
    </label>
  </div>

.ts

  changeCheckbox(tags, i) {
    if (tags) {
      this.tags[i].checked = !this.tags[i].checked;
    }
  }

Angular 2: Default checked on checkbox in ngFor - angular - html, I'm trying to set default value as checked on a checkbox inside my ngFor. This is my array of checkbox items: tags = [{ name: 'Empathetic', checked: false }  Angular checkbox is a regular checkbox that can be seen as a square box that is ticked (checked) when activated. HTML checkboxes are used to let a user select one or more options for a limited number of choices.

Use the checked property instead of ngModel,

 <div class="form-group">
      <div class="form-check" *ngFor="let tag of tags">
        <label class="form-check-label" for="tag{{tag.value}}">
          <input
            class="form-check-input"
            type="checkbox"
            id="tag{{tag.value}}"
            name="tagOptions"
            [checked]="tag.checked">
          {{tag.name}}
        </label>
      </div>
   </div>

DEMO

Creating a Dynamic Checkbox List in Angular, Learn how to create a dynamic checkbox list with validation using the The content is likely be applicable for older Angular 2 or other previous versions. The FormArray creates an easy to use API to set the value and check the In our template, we defined a checkbox that we iterate over with *ngFor . feature.feature_id already had value if data == feature.feature_id is both match the check box is checked like data=1 then feature.feature_id=1 then it's checked – anand Mar 14 at 13:10 | show 4 more comments

I know this is an old thread but I ran into a similar issue recently, the problem is on the name tag, since it's the same for every checkbox, the Form complains, you can use it as follows for example:

<div class="form-group">
  <div class="form-check" *ngFor="let tag of tags;">
    <label class="form-check-label" for="tag{{tag.value}}">
      <input
        class="form-check-input"
        type="checkbox"
        id="tag{{tag.value}}"
        [name]="tag.name"
        [(ngModel)]="tag.checked">
      {{tag.name}}
    </label>
  </div>
</div>

Set default state of a checkbox · Issue #405 · PatrickJS/starter · GitHub, The problem I am having is that to set the initial state of a check box to checked you add the In Angular 2+, If you're using template forms and/or ngModel then you can set <ng-container *ngFor="let opt of option_set_ids"> You can see I’m using Angular Forms’ ngModel to find the checked property to my “filterItem” and mapping the [value] attribute to the filterItem’s value property. The attribute could be left out since all I’m really interested in knowing is whether the checkbox is checked.

This question save my brain health haha. However I did an "upgrade" in the correct answer:

HTML:

<div class="form-group">
      <div class="form-check" *ngFor="let tag of tags; let i = index;">
        <label class="form-check-label" for="tag{{tag.value}}">
          <input
            class="form-check-input"
            type="checkbox"
            id="tag{{tag.value}}"
            name="tagOptions"
            (change)="changeCheckbox($event, i)"
            [checked]="tag.checked">
          {{tag.name}}
        </label>
      </div>

TS:

changeCheckbox(event, index){
      this.tags[index] = event.target.checked;
    }

How to Deal with Different Form Controls in Angular 2 ― Scotch.io, Angular 2 - Different form controls (final) scotch default to dark theme isActive: false, toggle: this.toggles[1].value, // default to <div> <label>Gender</label> <​div *ngFor="let gender of genders"> <label> <input In our case, we read the $​event.target.checked to find out if the checkbox is checked, then  <input type="checkbox" [checked]="person.is_adult"> This might work as well <input type="checkbox" attr.checked="{{person.is_adult}}"> because with attribute binding the browser might translate it from the attribute (which can only be strings) to boolean when reading it into its property. It is also checked instead of value. You can also use

Use the name tag as id instead:

   <label class="form-check-label" for="tag{{tag.value}}">
      <input
        class="form-check-input"
        type="checkbox"
        id="tag{{tag.value}}"
        name="tag{{tag.value}}"
        [(ngModel)]="tag.checked">
      {{tag.name}}
    </label>

Angular Radio Button and Checkbox Example, Find the technologies being used in our example. 1. Angular 9.0.2 2. To set radio button and checkbox checked we need to use property binding. We will provide how to use them, set default value and validate them. Select/ Unselect Checkbox List Items in Angular 9 In the app.component.ts file, we will define an object of items using which we will create a list. This object will have an id , value and a boolean to check if the current item is selected or not.

angular: Angular 2: Default checked on checkbox in ngFor, I'm trying to set default value as checked on a checkbox inside my ngFor.This is my array of checkbox items:tags = [{ name: 'Empathetic',  A common UI pattern for application is to have a collection of items where the user must select one too many of given items. We typically would handle this scenario with a checkbox list. In this post, we will build a checkbox list with Angular but create it dynamically from a list and add some additional validation rules. Here is what our UI

Reusable Angular: Create multiple checkboxes component, Note that checked is an optional param so by default all the options are unchecked. array of CheckBoxItem that will be used to render checkbox by ngFor. Output event that will send you an array of selected Ids e.g. [1,2,4]. Angular 2 Radio Button and Checkbox Example. This page will walk through Angular 2 radio button and checkbox example. We will provide demo using template-driven form and reactive form. Using both type of form we will see how to create radio button and checkbox, fetch values and set them checked and validate them.

Checkbox, When user clicks on the mat-checkbox , the default behavior is toggle checked value and set indeterminate to false . This behavior can be customized by  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.

Comments
  • I copied Your code into generated ng project and it works, I see no problem with Your code..
  • thats the answer i had posted before, why you are posting again as a answer?
  • You did not have the (change)="changeCheckbox(i)"
  • shouldn't u pass the tags arguments in (change)="changeCheckbox(i)" ?
  • That's correct, this answers my question. However, it leads to another problem: If I uncheck or check any of the checkboxes, the changes won't be registered.