0

I'm programming in Angular 13 framework and have a ChildComponet which has a few @Input()'s. I'm trying to determine when the value of my inputs are modified from the parent component.

I have a "latLonPickerComponent" which has @Input()'s "latitude" and "longitude". These values will be "undefined" to start but may change to a valid number later on (once an http request finishes running in the parent). I'd like to know (in the child component) when these new values come in from the parent.

I've looked into ngOnChanges as well as @Input-setter-getter but these methods all seem to ALSO change when the values of latitude and longitude are changed WITHIN the child component (unless I'm doing something wrong)

Stanton
  • 904
  • 10
  • 25
  • If you use getters/setters with private holding fields (e.g., `#input = false; @Input() get input() { return #input; } set input(value) { #input = value; }`, then within the child component you can just set the private field rather than the setter. Then add your logic for when the parent sets the @Input in the setter. – Heretic Monkey Sep 28 '22 at 19:21
  • If it is an `@Input` why it is getting modified ``WITHIN` the child component? – Eldar Sep 28 '22 at 19:21
  • @Eldar i'm using two way binding on the latitude and longitude inputs. So `@Input() latitude: number | undefined = undefined;` and `@Output() latitudeChange = new EventEmitter();` – Stanton Sep 28 '22 at 19:28
  • @Eldar ... oh man, that might be my issue... every time something changes I'm setting the input value and also emitting a new changed value. I think maybe what you're saying is to just emit the changed value? – Stanton Sep 28 '22 at 19:30
  • actually a take back my previous statement. Since I have 2 way binding it means if I `Emit` the changed latitude then it will `Change` the latitude value in the parent which then causes the `Input` value of latitude to change in the child. – Stanton Sep 28 '22 at 19:39
  • @Stanton I think you should try reference binding instead updating the same inputs by emitting it to parent(two way binding). Otherwise you will end up triggering ngOnchanges after each emit. – Kelum Bandara Sep 29 '22 at 05:43

2 Answers2

1

Really you can use a setter in the input

Your child:

  <button (click)="name='other one'">change</button>

  name:string=null
  @Input('name') set _name(value: string)
  {
    console.log("Change parent")
    this.name=value;
  };

When change from parent you see the console "Change parent", if you click the button you not.

See a stackblitz

Eliseo
  • 50,109
  • 4
  • 29
  • 67
0

By default, you will always be notified if the reference of the input value changes. I believe, what you are asking is if any property of the object changes (but not the object itself).

Have you seen this post: How to detect when an @Input() value changes in Angular?

Lilit Mazmanyan
  • 80
  • 1
  • 8
  • the accepted answer in the link provided provides some nice insights on change detection. It also mentions that using a setter and getter function only triggers when the parent changes value so it might suit the OP case – Fiehra Oct 04 '22 at 19:37