How does angular2 detect the changes in a stateful pipe?

0

Issue

I created a simple stateful pipe based on the Angular.io tutorial on pipes:

@Pipe({
    name: 'fetch',
    pure: false
})

class FetchJsonPipe  implements PipeTransform{
    private fetchedValue = 'waiting';
    private fetchedValue2 = 'waiting2';

    transform(value:string, args:string[]):any {
        setTimeout(() => {
            this.fetchedValue = 'done';
            this.fetchedValue2 = 'done2';
        }, 3000);
        return this.fetchedValue2;
    }
}

@Component({ selector: 'sd-splash'
           , template: 'hello ng2 {{ "5" | fetch }}'
           , pipes: [FetchJsonPipe]
           })

My question is, I return this.fetchedValue from #transform immediately.
Since it’s just a string, it’s returned by value. Later, when the timeout is
finished, I just assign the value 'done' to a property (which is also
private).

How does Angular2 know that the intial result, 'waiting' is not final? How
does it know that the updated value will be available through #fetchedValue?
The promise is not exposed at all, and Angular2 has no information on the name
of the field I store the result in.

The only clue it has is pure == false, which I guess instructs it to
watch the instance for changes. But I don’t see how it has information on
which field to watch.

But it works! And I have no idea why.

Cheers

Solution

Angular monkey patches browser events (including setTimeout()) using a library called Zone.js. When events happen, AngularJS triggers change detection.

With stateful pipes, AngularJS will re-evaluate the pipe on every event because the pipe result may change even with the same inputs.

With pure pipes, AngularJS will trigger change detection and re-evaluate the pipe only when one of the input changes (i.e. data coming in, or the args).

Answered By – pixelbits

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More