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 :

<div class="uk-width-xlarge-1-1 uk-width-medium-1-2">
                <div (submit)="addProp1()" class="uk-input-group">
                    <span class="uk-input-group-addon"><input type="checkbox"  data-md-icheck/></span>
                    <label>Proposition 1</label>
                    <input [(ngModel)]="proposition1.wordingP" type="text" class="md-input" required class="md-input"/>
                </div>
            </div>

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=> {
                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 ?

Ankit Singh · Accepted Answer · 2020-03-16T18:58:49.453

105

StackBlitz

Template: You can either use the native change event or NgModel directive's ngModelChange.

<input type="checkbox" (change)="onNativeChange($event)"/>

or

<input type="checkbox" ngModel (ngModelChange)="onNgModelChange($event)"/>

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
  }
}

edited Mar 16 '20 at 18:58

answered May 06 '16 at 17:07

Ankit Singh

22,335
10
60
85

2

Note that it's (change) and not (onChange). It was my silly mistake that took my a few minutes to figure out – Sacky San Nov 22 '16 at 06:13

score 15 · Answer 2 · answered Jun 22 '17 at 12:35

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.

<input type="checkbox" [(ngModel)]="myModel.property" (ngModelChange)="processChange()" />

score 6 · Answer 3 · answered May 06 '16 at 17:01

6

You can use ngModel like

<input type="checkbox" [ngModel]="checkboxValue" (ngModelChange)="addProp($event)" data-md-icheck/>

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.

answered May 06 '16 at 17:01

Günter Zöchbauer

490,478
163
1,733
1,404

didnt work, sorry , can you clarify more according to the code above ? i'll appreciate it .. – selem mn May 07 '16 at 19:14
1

`[ngModel]="checkboxValue"` adds the `ngModel` directrives and default `ControlValueAccessor` (and binds the value of `checkboxValue` to the checkbox). With `ngModel` we can bind to the `ngModelChange` event that is emitted every time the checkbox changes. – Günter Zöchbauer May 07 '16 at 19:20
1

What Angular"'2 version are you using. There were issues with binding to some input elements in FF and IE but they were fixed recently. – Günter Zöchbauer May 07 '16 at 19:22
it is Beta 0, and i didn't try to update it, The problem is that the `ngModel` is not considering my changes .. – selem mn May 07 '16 at 19:39
You would need at least beta.16 AFAIR – Günter Zöchbauer May 07 '16 at 19:42

Vijay Chauhan · Answer 4 · 2018-06-21T13:34:39.137

Check Demo: https://stackblitz.com/edit/angular-6-checkbox?embed=1&file=src/app/app.component.html

  CheckBox: use change event to call the function and pass the event.

<label class="container">    
   <input type="checkbox" [(ngModel)]="theCheckbox"  data-md-icheck 
    (change)="toggleVisibility($event)"/>
      Checkbox is <span *ngIf="marked">checked</span><span 
     *ngIf="!marked">unchecked</span>
     <span class="checkmark"></span>
</label>
 <div>And <b>ngModel</b> also works, it's value is <b>{{theCheckbox}}</b></div>

Launch an event when checking a checkbox in Angular2

4 Answers4

Linked