ngModelChange triggers before the model is actually changed

Question

Is there an event that triggers after a model is changed, and not before the change? Everytime a checkbox is set, I need to check whether I can enable a next button. So I loop through my list to check in any object is selected. However the values are first bound after the ModelChange event:

<tr *ngFor="let social of socialMediaList">
   <td>{{social.name}}</td>
   <td>
      <input type="checkbox" (ngModelChange)="onSocialMediaChange($event)" type="checkbox" name="options"
                [(ngModel)]="social.selected">
   </td>
</tr>

My js:

onSocialMediaChange($event) {
    this.ageRangeList = null;
    this.canContinueFromSocialNetwork = this.socialMediaList.filter((item) => item.selected === true).length>0;
  }

Answer 1

Make sure the ngModelChange attribute is after the ngModel attribute.

<input
  type="checkbox"
  [(ngModel)]="social.selected" // 1st place
  (ngModelChange)="onSocialMediaChange($event)" // 2nd place
  name="options">