Detect change to @input variable programmatically - equivalent to watch

Ionic Framework ionic-v3
1

Hello,

I have a series of components that talk to eachother through @input and @output events/subscribers. Basically, a child component publishes an event via the @output EventEmitter, and the parent then passes the result back down to a different child via the input directive in the html.

For the sake of discussion, let’s say I have this decorated variable in a component:

@input() var myVar= “tacos”

I am looking for a way to detect when a variable’s value changes in my javascript component code. There is the ngOnChanges function, and I suppose I could inspect the SimpleChange object for a reference to “myVar”. Is there a better, more scalable way to do it, similar to $scope.$watch functionality from ng1? I cannot figure this out from extensive googling.

I am a bit of an observable n00b so I am hoping that’s the secret sauce I need.

Thanks,
Dan

2

I believe your issue is similar to the one I posted here (45087).

I believe ngOnChanges() is the “scalable” way to do change detection and that it is similar to $scope.$watch and that there is no “more scalable” way (please tell me if I’m wrong). I also believe you don’t need an @output EventEmitter/subscriber at all (see how I do it in my post). However, what I’m doing currently does not fire ngOnChanges() as it should, it seems. Let’s wait and see if there’s a response to the issue I just posted, it may answer your question.

There’s a lot of relevant info here on change detection - still sifting through it…

1 Like
3

Do you mind sharing your code?

I have an issue here (45110) where the @Input decorator is breaking my component and for the life of me I can’t figure out what is wrong. I want to see how you wired your @input decorator in your components. Thanks!

5

I have a component class that looks like this.

export class ImageWithMarkers {
    @Input() imageIdPrefix;
    @Input() auditImage;
    @Input() dragEnabled;
    @Output() addMarker = new EventEmitter();
    @Output() observationMoved = new EventEmitter();

    constructor(uiHelperUtil:UiHelperUtil){
        this.uiHelperUtil = uiHelperUtil;
    }

    ngOnInit(){
        console.log("imageIdPrefix: ", imageIdPrefix);
        console.log("auditImage: ", auditImage);
        console.log("dragEnabled: ", dragEnabled);
    }

    /// other functions
}
6

If you want to get rid of EventEmitter() calls, you can accomplish change detection without them by using ngOnChanges(), see https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html which includes a plunkr example (in that plunkr, check out the file ‘on-changes.component.ts’ to see how to accomplish change detection without EventEmitter()) plunkr here

1 Like
7

ngOnChanges() works for me.

8

Hi,
The only method I found to detect the change is:

_myVar: string = “tacos”;
@input() set myVar(value:string){_myVar=value;}
get myVar(){return _myVar;}

and I use _myVar in the HTML part.