feat(ivy): observable QueryList (#21859)

PR Close #21859

packages/core/src/render3/query.ts

@@ -10,6 +10,7 @@
 // correctly implementing its interfaces for backwards compatibility.
 import {Observable} from 'rxjs/Observable';
 
+import {EventEmitter} from '../event_emitter';
 import {QueryList as viewEngine_QueryList} from '../linker/query_list';
 import {Type} from '../type';
 import {getSymbolIterator} from '../util';
@@ -295,7 +296,7 @@ function createPredicate<T>(
 
 class QueryList_<T>/* implements viewEngine_QueryList<T> */ {
   readonly dirty = true;
-  readonly changes: Observable<T>;
+  readonly changes: Observable<T> = new EventEmitter();
   private _values: T[] = [];
   /** @internal */
   _valuesTree: any[] = [];
@@ -367,9 +368,12 @@ class QueryList_<T>/* implements viewEngine_QueryList<T> */ {
     (this as{dirty: boolean}).dirty = false;
   }
 
-  notifyOnChanges(): void { throw new Error('Method not implemented.'); }
+  notifyOnChanges(): void { (this.changes as EventEmitter<any>).emit(this); }
   setDirty(): void { (this as{dirty: boolean}).dirty = true; }
-  destroy(): void { throw new Error('Method not implemented.'); }
+  destroy(): void {
+    (this.changes as EventEmitter<any>).complete();
+    (this.changes as EventEmitter<any>).unsubscribe();
+  }
 }
 
 // NOTE: this hack is here because IQueryList has private members and therefore
@@ -396,6 +400,7 @@ export function queryRefresh(query: QueryList<any>): boolean {
   const queryImpl = (query as any as QueryList_<any>);
   if (query.dirty) {
     query.reset(queryImpl._valuesTree);
+    query.notifyOnChanges();
     return true;
   }
   return false;

packages/core/test/render3/query_spec.ts

@@ -826,4 +826,34 @@ describe('query', () => {
     });
 
   });
+
+  describe('observable interface', () => {
+
+    it('should allow observing changes to query list', () => {
+      const queryList = new QueryList();
+      let changes = 0;
+
+      queryList.changes.subscribe({
+        next: (arg) => {
+          changes += 1;
+          expect(arg).toBe(queryList);
+        }
+      });
+
+      // initial refresh, the query should be dirty
+      qR(queryList);
+      expect(changes).toBe(1);
+
+
+      // refresh without setting dirty - no emit
+      qR(queryList);
+      expect(changes).toBe(1);
+
+      // refresh with setting dirty - emit
+      queryList.setDirty();
+      qR(queryList);
+      expect(changes).toBe(2);
+    });
+
+  });
 });