Launch an event when checking a checkbox in Angular2

Question

I m newbie in Angular2 and in web globally   I want to launch an action that changes an oject paramater value in the Database when checking a checkbox and or unchecking it using Material-Design  I tried with   ngModel   but nothing happened  the idea is that i have to add some propositions with checked   unchecked status to tell if it is a true or false proposition  Here is the proposition model       export class PropositionModel           id string          wordingP string     the proposition         propStatus Boolean     the proposition status     here is the Html code for a proposition     lt div class  uk-width-xlarge-1-1 uk-width-medium-1-2  gt                   lt div  submit   addProp1    class  uk-input-group  gt                       lt span class  uk-input-group-addon  gt  lt input type  checkbox   data-md-icheck  gt  lt  span gt                       lt label gt Proposition 1 lt  label gt                       lt input   ngModel    proposition1 wordingP  type  text  class  md-input  required class  md-input   gt                   lt  div gt               lt  div gt    here is the TypeScript code for adding the proposition   addProp1             this proposition1   new PropositionModel            this proposition1 propStatus   false          this propositionService addProposition this proposition1               subscribe response  gt                    console log response                   console log this proposition1                   this proposition1   new PropositionModel              And as you can see i made it a false by default for the proposition status and I want to change it once i checked the proposition  Here is an image how it looks for a better issue understanding    Any help Please

User · Answer

Check Demo  https   stackblitz com edit angular-6-checkbox embed 1 amp file src app app component html    CheckBox  use change event to call the function and pass the event    lt label class  container  gt          lt input type  checkbox    ngModel    theCheckbox   data-md-icheck       change   toggleVisibility  event    gt        Checkbox is  lt span  ngIf  marked  gt checked lt  span gt  lt span        ngIf   marked  gt unchecked lt  span gt        lt span class  checkmark  gt  lt  span gt   lt  label gt    lt div gt And  lt b gt ngModel lt  b gt  also works  it s value is  lt b gt   theCheckbox   lt  b gt  lt  div gt

User · Answer

If you add double paranthesis to the ngModel reference you get a two-way binding to your model property  That property can then be read and used in the event handler  In my view that is the most clean approach    lt input type  checkbox    ngModel    myModel property   ngModelChange   processChange      gt

User · Answer

StackBlitz    Template  You can either use the native change event or NgModel directive s ngModelChange    lt input type  checkbox   change   onNativeChange  event    gt    or   lt input type  checkbox  ngModel  ngModelChange   onNgModelChange  event    gt    TS   onNativeChange e       here e is a native event   if e target checked          do something here        onNgModelChange e       here e is a boolean  true if checked  otherwise false   if e          do something here

User · Answer

You can use ngModel like   lt input type  checkbox   ngModel   checkboxValue   ngModelChange   addProp  event   data-md-icheck  gt    To update the checkbox state by updating the property checkboxValue in your code and when the checkbox is changed by the user addProp   is called

[html] Launch an event when checking a checkbox in Angular2

Examples related to html

Examples related to checkbox

Examples related to data-binding

Examples related to typescript

Examples related to angular