Angular Detect Object Property Change

Question

I have a web portal written in Angular 7 that has a profile page where the user can edit their account data. The whole portal also has an account section in the top right that shows the logged in users username (and is how they get to the profile editing). I have the drop down menu subscribing to changes of user in the core auth handler so that if they log out and log someone else in it updates properly, etc. However, if the user edits their username on the profile page it doesn't update in the account dropdown until they log out and back in because it's looking for a full change of user, not just change of user data.

So the question is how do I subscribe to the changes in the properties of the current user so I can update the username display when they change it?

Create a simple event emitter and subscribe to the same in account dropdown and emit it when the user edits their name with the new name and update the same in the dropdown. — Manish
– Manish, Commented Sep 10, 2019 at 6:05
That's what I was looking for, thank you. Make it an answer and I will accept. — sfaust
– sfaust, Commented Sep 10, 2019 at 22:00

Barr J · Accepted Answer · 2019-09-10 06:07:23Z

1

You can use observables:

<form #f="ngForm">
  <input type="text" name="firstName" [(ngModel)]="user.firstName">
  <input type="text" name="sureName" [(ngModel)]="user.sureName">
</form>

@ViewChild('f') f;

ngAfterViewInit() {
  this.f.form.valueChanges.subscribe((change) => {
   console.log(change)
  })
}

You can use ngModelChange:

<input type="text" (ngModelChange)="doSomething($event)" [ngModel]="user.firstName">

doSomething(event) {
  console.log(event); // logs model value
}

Or you can use KeyValueDiffers:

import { KeyValueChanges, KeyValueDiffer, KeyValueDiffers } from '@angular/core';

export class User {
  firstName: string;
  sureName: string;
}

@Component({
  selector: 'my-app',
  templateUrl: `./app.component.html`
})
export class AppComponent {
  private customerDiffer: KeyValueDiffer<string, any>;
  private customer: Customer;

  constructor(private differs: KeyValueDiffers) {}

  ngOnInit(): void {
    this.user = new User();
    this.userDiffer = this.differs.find(this.user).create();
  }

  userChanged(changes: KeyValueChanges<string, any>) {
    console.log('changes');
    /* If you want to see details then use
      changes.forEachRemovedItem((record) => ...);
      changes.forEachAddedItem((record) => ...);
      changes.forEachChangedItem((record) => ...);
    */
  }

  ngDoCheck(): void {
      const changes = this.userDiffer.diff(this.customer);
      if (changes) {
        this.userChanged(changes);
      }
  }
}

answered Sep 10, 2019 at 6:07

Barr J

11k2 gold badges31 silver badges49 bronze badges

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

1 Comment

sfaust Over a year ago

Thanks for the reply but the event emitters made more sense to me and seemed easier so I went that route...

Collectives™ on Stack Overflow

Angular Detect Object Property Change

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related