feat(core): Added patchValue and setValue for QueryParamGroup

fixes #2

Author: Airblader

projects/ngqp-demo/src/app/playground/playground.component.html

@@ -11,4 +11,7 @@
     <input type="number" class="form-control" queryParamName="counter" />
 
     <input type="range" class="form-control" min="1" max="10" queryParamName="range" />
-</ng-container>
+</ng-container>
+
+<button type="button" (click)="patchGroupValue()">Patch Group</button>
+<button type="button" (click)="setGroupValue()">Set Group</button>

projects/ngqp-demo/src/app/playground/playground.component.ts

@@ -55,4 +55,20 @@ export class PlaygroundComponent {
         });
     }
 
+    public patchGroupValue() {
+        this.paramGroup.patchValue({
+            checker: false,
+            counter: 1337,
+            range: 9,
+        });
+    }
+
+    public setGroupValue() {
+        this.paramGroup.setValue({
+            checker: false,
+            counter: 1337,
+            range: 9,
+        });
+    }
+
 }

projects/ngqp/core/src/lib/model.ts

@@ -11,6 +11,11 @@ export type ParamDeserializer<T> = (value: string | null) => T | null;
 /** TODO Documentation */
 export type OnChangeFunction<T> = (value: T) => void;
 
+/** TODO Documentation */
+export interface QueryParamGroupValue {
+    [ controlName: string ]: any;
+}
+
 /**
  * TODO Documentation
  */
@@ -34,10 +39,10 @@ export interface QueryParamControlOpts<T> {
  */
 export class QueryParamGroup {
 
-    private _valueChanges = new Subject<any>();
+    private _valueChanges = new Subject<QueryParamGroupValue>();
 
     /** TODO Documentation */
-    public readonly valueChanges: Observable<any> = this._valueChanges.asObservable();
+    public readonly valueChanges: Observable<QueryParamGroupValue> = this._valueChanges.asObservable();
 
     /** TODO Documentation */
     public readonly controls: { [ controlName: string ]: QueryParamControl<any> };
@@ -53,13 +58,34 @@ export class QueryParamGroup {
     }
 
     /** TODO Documentation */
-    public get value(): any {
-        const value: any = {};
+    public get value(): QueryParamGroupValue {
+        const value: QueryParamGroupValue = {};
         Object.keys(this.controls).forEach(controlName => value[ controlName ] = this.controls[ controlName ].value);
 
         return value;
     }
 
+    /**
+     * TODO Documentation
+     */
+    public patchValue(value: QueryParamGroupValue): void {
+        Object.keys(value).forEach(controlName => {
+            const control = this.controls[ controlName ];
+            if (isMissing(control)) {
+                return;
+            }
+
+            control.setValue(value[ controlName ]);
+        });
+    }
+
+    /**
+     * TODO Documentation
+     */
+    public setValue(value: QueryParamGroupValue): void {
+        Object.keys(this.controls).forEach(controlName => this.controls[ controlName ].setValue(value[ controlName ]));
+    }
+
     /**
      * TODO Documentation
      */

projects/ngqp/core/src/lib/query-param-group.directive.ts

@@ -1,7 +1,7 @@
 import { Directive, Input, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Params, Router } from '@angular/router';
 import { Subject } from 'rxjs';
-import { concatMap, debounceTime, takeUntil, tap } from 'rxjs/operators';
+import { bufferTime, concatMap, debounceTime, map, takeUntil, tap } from 'rxjs/operators';
 import { QueryParamNameDirective } from './query-param-name.directive';
 import { QueryParamControl, QueryParamGroup } from './model';
 import { isMissing } from './util';
@@ -101,6 +101,12 @@ export class QueryParamGroupDirective implements OnInit, OnDestroy {
     private setupNavigationQueue() {
         this.queue$.pipe(
             takeUntil(this.destroy$),
+            // This buffers multiple synchronous events together to only execute a single navigation
+            bufferTime(0),
+            map(paramsList => paramsList.reduce((a: Params, b: Params): Params => {
+                return { ...a, ...b };
+            }, {})),
+
             concatMap(params => this.router.navigate([], {
                 relativeTo: this.route,
                 queryParamsHandling: 'merge',