CODEWITHSUNDEEP
angular
edkeveked
edkeveked

Reputation: 18381

Detecting changes of an object angular 2

I would like to know if the object myObject has been modified in the view and for that purpose I am using ngOnChanges.

this is my html

  <form class="inputForm">
    <table id="inputFormTable">
      <tr>
        <td><label>login</label></td>
        <td><input type="text" size="40" [(ngModel)]="myObject.value1" name="value1"/></td>
      </tr>
      <tr>
        <td><label>Mot de passe</label></td>
        <td><input type="password" size="40" [(ngModel)]="myObject.value2" name="value2"/></td>
      </tr>
    </table>

this is my component using ngOnChanges

import {Component, OnInit, OnChanges, SimpleChanges, Input} from '@angular/core';
export class UtilisateurComponent implements OnInit, OnChanges {
  @Input() myObject: any= {actif: false};
  ngOnChanges(changes: SimpleChanges): void {
    for (let propName in changes) {
      let chng = changes[propName];
      let cur = JSON.stringify(chng.currentValue);
      let prev = JSON.stringify(chng.previousValue);
      console.log(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
    }
  }
}

When myObject properties (value1 and value2) change, I would like to trigger the ngOnChanges. But with what I have done so far, I am unable to do so. Thanks in advance for any help!

Upvotes: 0

Views: 7243

Answers (5)

RemyaJ
RemyaJ

Reputation: 5526

ngOnChanges in used when @Input value to a component changes. From what I understand from your code, it is ngModelChange that you want.

Upvotes: 2

Milad
Milad

Reputation: 28592

ngModelChanges is the best option when detecting the change only for the input , but if you want to detect these change across the app : 

import {Component, OnInit, DoCheck, SimpleChanges, Input} from '@angular/core';
export class UtilisateurComponent implements OnInit, DoCheck {
  @Input() myObject: any= {actif: false};
  ngDoCheck(): void {
    for (let propName in changes) {
      let chng = changes[propName];
      let cur = JSON.stringify(chng.currentValue);
      let prev = JSON.stringify(chng.previousValue);
      console.log(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
    }
  }
}

Upvotes: 1

Julia Passynkova
Julia Passynkova

Reputation: 17879

Use (ngModelChange) on your input:

<input type="text" size="40" [(ngModel)]="myObject.value1"  (ngModelChange)="yourCustomMethod($event)" name="value1"/>

ngOnChanges method is called by the framework only when a parent component changed object ref of myObject input.

Upvotes: 3

Max Koretskyi
Max Koretskyi

Reputation: 105499

ngOnChanges hook is only triggered when a parent component's bound property changes and child component's property is updated with this changed value. Read more here.

To get notification when model's property changes, you would need to use ngModelChange event like this:

<input [(ngModel)]="myObject.value1" (ngModelChange)="value1Changed()"/>

Upvotes: 0

a better oliver
a better oliver

Reputation: 26828

ngOnChanges is only called when the value of myObject changes, but it doesn't change in your case. What you want is ngModelChange:

<input [(ngModel)]="myObject.value1" (ngModelChange)="value1Changed()"/>

Where value1Changed is a method of the component.

Upvotes: 2

Related Questions