Angular 2 Checkbox Two Way Data Binding

Question

I  m fairly new to Angular2 and I have a little problem   In my Login-Component-HTML  I have two checkboxes  which I want to bind in two way data-binding to the Login-Component-TypeScript   This is the HTML    lt div class  checkbox  gt   lt label gt       lt input  saveUsername   ngModel    saveUsername selected  type  checkbox  data-toggle  toggle  gt Save username  lt  label gt   lt  div gt    And this is the Component ts   import   Component  OnInit      from   angular core   import   Router                 from   angular router   import   Variables              from        services variables     Component       selector   login       moduleId  module id      templateUrl   login component html       styleUrls    login component css        export class LoginComponent implements OnInit        private saveUsername  boolean   true      private autoLogin  boolean   true      constructor private router  Router  private variables  Variables           ngOnInit              this loginValid   false             Get user name from local storage if you want to save          if  window localStorage getItem  username       null               this saveUsername   true             this autoLogin   true             console log this saveUsername  this autoLogin             else              console log  init   window localStorage getItem  username                          login username  string  password  string  saveUsername  boolean  autoLogin  boolean            this variables setUsername username           this variables setPassword password           this variables setIsLoggedIn true           console log saveUsername  autoLogin             this router navigate   dashboard             If I click an checkbox  I get the correct value in the controller  component    But if I change the value of for example saveUsername in the component  the checkbox didn t  get  the new value   So I can  t manipulate the checkbox from the Component  like I want to do in the ngOnInit in the component   Thanks for your help

User · Answer

Unfortunately solution provided by  hakani is not two-way binding  It just handles One-way changing model from UI FrontEnd part   Instead the simple    lt input   ngModel    checkboxFlag  type  checkbox   gt    will do two-way binding for checkbox    Afterwards  when Model checkboxFlag is changed from Backend or UI part - voila  checkboxFlag stores actual checkbox state   To be sure I ve prepared Plunker code to present the result   https   plnkr co edit OdEAPWRoqaj0T6Yp0Mfk  Just to complete this answer you should include the import   FormsModule   from   angular forms  into app module ts and add to imports array i e   import   FormsModule   from   angular forms            NgModule     imports                  FormsModule

User · Answer

A workaround to achieve the same specially if you want to use checkbox with for loop is to store the state of the checkbox inside an array and change it based on the index of the  ngFor loop  This way you can change the state of the checkbox in your component   app component html   lt div  ngFor  let item of items  index as i  gt     lt input type  checkbox   checked   category i    change   checkChange i   gt      item name    lt  div gt   app component ts  items           name   salad          name   juice          name   dessert          name   combo           category        checkChange i       if  this category i            this category i     this category i             else        this category i    true

User · Answer

I m working with Angular5 and I had to add the  name  attribute to get the binding to work    The  id  is not required for binding    lt input type  checkbox  id  rememberMe  name  rememberMe    ngModel    rememberMe  gt

User · Answer

Angular   9 0 0  Angular CLI  9 0 1 Node  13 10 1 OS  linux x64    html file   lt input   ngModel    userConsent  id  userConsent  required type  checkbox   gt    I Accept     ts file  userConsent  boolean   false

User · Answer

You must add name  selected  attribute to input element   For example    lt div class  checkbox  gt     lt label gt       lt input name  selected    ngModel    saveUsername selected  type  checkbox  gt Save username    lt  label gt   lt  div gt

User · Answer

In any situation  if you have to bind a value with a checkbox which is not boolean then you can try the below options  In the Html file    lt div class  checkbox  gt   lt label for  favorite-animal  gt Without boolean Value lt  label gt   lt input type  checkbox  value     checked   ischeckedWithOutBoolean     Y     change   ischeckedWithOutBoolean    event target checked    Y    N   gt   lt  div gt    in the componentischeckedWithOutBoolean  any    Y     See in the stackblitz https   stackblitz com edit angular-5szclb embed 1 amp file src app app component html

User · Answer

You can remove  selected from saveUsername in your checkbox input since saveUsername is a boolean  Instead of   ngModel   use  checked   saveUsername   change   saveUsername      saveUsername   Edit  Correct Solution    lt input   type  checkbox     checked   saveUsername     change   saveUsername    saveUsername   gt    Update  Like  newman noticed when ngModel is used in a form it won t work  However  you should use  ngModelOptions  attribute like  tested in Angular 7      lt input   type  checkbox      ngModel    saveUsername     ngModelOptions    standalone  true    gt      I also created an example at Stackblitz  https   stackblitz com edit angular-abelrm

User · Answer

When using  lt abc   bar    foo   gt  syntax on angular    This translates to    lt abc  bar   foo   barChange   foo    event    gt   Which means your component should have    Input   bar   Output   barChange   new EventEmitter

User · Answer

You can just use something like this to have two way data binding    lt input type  checkbox   checked   model property   change   model property    model consent obtained ind  gt

User · Answer

My angular directive like angularjs  ng-true-value ng-false-value    Directive       selector   input type checkbox  checkModel      export class checkboxDirective        Input   checkModel any       Input   trueValue any       Input   falseValue any       Output   checkModelChange   new EventEmitter lt any gt          constructor private el  ElementRef           ngOnInit            this el nativeElement checked   this checkModel  this trueValue              HostListener  change      event    onChange event any            this checkModel   event target checked   this trueValue   this falseValue          this checkModelChange emit this checkModel              html   lt input type  checkbox    checkModel    check   trueValue   1   falseValue   0  gt

User · Answer

I prefer something more explicit    component html   lt input  saveUserNameCheckBox     id  saveUserNameCheckBox       type  checkbox        checked   saveUsername        change   onSaveUsernameChanged saveUserNameCheckBox checked     gt    component ts  public saveUsername boolean   public onSaveUsernameChanged value boolean       this saveUsername   value

User · Answer

To get checkbox work you should follow all these steps    import   FormsModule  in your module Put the input inside a form tag your input should be like this     lt input name  mpf  type  checkbox    ngModel    value    gt    Note  do not forget to put name in your input

User · Answer

In Angular p-checkbox    Use all attributes of p-checkbox   lt p-checkbox name  checkbox  value  isAC       label  All Colors    ngModel    selectedAllColors        ngModelOptions    standalone  true   id  al       binary  true  gt   lt  p-checkbox gt    And more importantly  don t forget to include  ngModelOptions    standalone  true  as well as it SAVED MY DAY

User · Answer

I know it may be repeated answer  but for any one want to load list of checkboxes with selectall checkbox into angular form i follow this example  Select all deselect all checkbox using angular 2   it work fine but just need to add    ngModelOptions    standalone  true      the final HTML should be like this    lt ul gt       lt li gt  lt input type  checkbox    ngModel    selectedAll   change   selectAll      gt  lt  li gt       lt li  ngFor  let n of names  gt       lt input type  checkbox    ngModel    n selected   change   checkIfAllSelected     gt   n name        lt  li gt     lt  ul gt    TypeScript    selectAll         for  var i   0  i  lt  this names length  i            this names i  selected   this selectedAll              checkIfAllSelected         this selectedAll   this names every function item any            return item selected    true                 hope this help thnx

User · Answer

I have done a custom component tried two way binding  Mycomponent   lt input  type  checkbox     ngModel    model   gt    model   boolean       Output   checked  EventEmitter lt boolean gt    new EventEmitter lt boolean gt       Input  checked   set model checked  boolean       this  model   checked    this checked emit this  model     console log   Input setmodel  checked      get model       return this  model      strange thing is this works   lt mycheckbox   checked   isChecked   checked   isChecked    event  gt    while this wont   lt mycheckbox    checked    isChecked  gt

[html] Angular 2 Checkbox Two Way Data Binding

Examples related to html

Examples related to angular

Examples related to typescript

Examples related to checkbox

Examples related to data-binding