Angular 2 - Endless loop in async pipe

Question

I`m getting an endless loop when I try to bind a async function like this:

     {{myAsyncFunc(i) | async}}<         


        

Answer 1

You're returning a new Promise from myAsyncFunc(i: string) on every call, that's why you get an "endless loop". Try returning the same Promise instance ;-)

The "endless loop" is actually not a traditional endless loop but rather a side-effect of async pipe triggering a change detection cycle when its input Promise resolves. On this new change detection cycle, angular will call myAsyncFunc(i: string) and get a new Promise to observe, which then resolves the whole thing starts again.