Events not firing within checkboxes in Angular2

Question

I have tried everything I can think of to get events to fire when a checkbox changes state but I can't seem to get it working.

Here is the html

<div *ngIf="role?.ACTIVE_FLAG === 'Y'">
   <div class="label"> Active Record </div>
      <input type="checkbox" (click)="toggleRoleActive()" checked>
</div>
<div *ngIf="role?.ACTIVE_FLAG === 'N'">
   <div class="label"> Active Record </div>
      <input type="checkbox" (click)="toggleRoleActive()">
</div>

Here is toggleRoleActive()
Edit:

toggleRoleActive(){
    if(this.role_submit.ACTIVE_FLAG === 'Y'){
        this.role_submit.ACTIVE_FLAG = 'N';
    }else {
        this.role_submit.ACTIVE_FLAG = 'Y';
    }
}

One of the challenges I am facing, is the button needs to either be checked or not checked when I get data from the server. But if they want to deactivate or reactivate the role I would like it to respond to the checkbox.

I have tried using [(ngModel)], (change) and much simpler solutions, but the only thing that has triggered any events at all is [(ngModel)], but doing it that way I end up with true/false instead of 'Y'/'N'. Also if I use [(ngModel)], the checkbox is always marked checked regardless of what data my server sends.

Answer 1

You can handle assignment and change event handler separately:

<input type="checkbox" 
  [ngModel]="role?.ACTIVE_FLAG === 'Y' ? true : false"        
  (ngModelChange)="toggleRoleActive()" checked>

Answer 2

I have been dealing with checkboxes like this

<input #myId type="checkbox" (change)="myProp = myId.checked" />

The component has a myProp property defined

Here is more info + a demo http://www.syntaxsuccess.com/viewarticle/input-controls-in-angular-2.0