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-16 18:58:49Z

115

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, 2020 at 18:58

answered May 6, 2016 at 17:07

Ankit Singh

25k12 gold badges69 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sacky San Over a year ago

Note that it's (change) and not (onChange). It was my silly mistake that took my a few minutes to figure out

Jakob Lithner · Accepted Answer · 2017-06-22 12:35:35Z

17

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()" />

answered Jun 22, 2017 at 12:35

Jakob Lithner

4,4567 gold badges41 silver badges62 bronze badges

Comments

Günter Zöchbauer · Accepted Answer · 2016-05-06 17:01:03Z

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 6, 2016 at 17:01

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

5 Comments

SeleM Over a year ago

didnt work, sorry , can you clarify more according to the code above ? i'll appreciate it ..

Günter Zöchbauer Over a year ago

[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 Over a year ago

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.

SeleM Over a year ago

it is Beta 0, and i didn't try to update it, The problem is that the ngModel is not considering my changes ..

Günter Zöchbauer Over a year ago

You would need at least beta.16 AFAIR

Vijay Chauhan · Accepted Answer · 2018-06-21 13:34:39Z

2

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>

edited Jun 21, 2018 at 13:34

answered Jun 21, 2018 at 13:29

Vijay Chauhan

1,31219 silver badges18 bronze badges

Collectives™ on Stack Overflow

Launch an event when checking a checkbox in Angular2

4 Answers 4

1 Comment

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related