feat(docs): Show changes on param group

Author: Airblader

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

@@ -6,12 +6,10 @@
     </div>
 </div>
 
-<div *ngIf="refreshing" class="progress" [style.height.px]="1">
-    <div class="progress-bar" role="progressbar" [style.width.%]="refreshProgress"></div>
+<div class="demo-browser__content">
+    <ng-content></ng-content>
 </div>
 
-<div class="demo-browser__content">
-    <ng-container *ngIf="!refreshing">
-        <ng-content></ng-content>
-    </ng-container>
+<div *ngIf="group" class="demo-browser__console">
+    ({{ changeCounter }}) <ng-container *ngIf="lastChange">{{ lastChange }}</ng-container>
 </div>

projects/ngqp-demo/src/app/demo-browser/demo-browser.component.scss

@@ -68,4 +68,13 @@
         padding: 16px;
         min-height: 120px;
     }
+
+    &__console {
+        background: #eeeeee;
+        border-top: 1px solid #e0e0e0;
+        padding: 4px 8px;
+
+        font-size: small;
+        color: #616161;
+    }
 }

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

@@ -1,7 +1,9 @@
-import { Component, Inject, Input } from '@angular/core';
+import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core';
 import { Params } from '@angular/router';
-import { NGQP_ROUTER_ADAPTER, RouterAdapter } from '@ngqp/core';
+import { Subject } from 'rxjs';
+import { NGQP_ROUTER_ADAPTER, QueryParamGroup, RouterAdapter } from '@ngqp/core';
 import { TestRouterAdapter } from '../test-router-adapter.service';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
     selector: 'demo-browser',
@@ -11,16 +13,38 @@ import { TestRouterAdapter } from '../test-router-adapter.service';
         { provide: NGQP_ROUTER_ADAPTER, useClass: TestRouterAdapter },
     ],
 })
-export class DemoBrowserComponent {
+export class DemoBrowserComponent implements OnInit, OnDestroy {
 
     @Input()
     public set initialQueryParams(value: string) {
         this.updateQueryParams(value);
     }
 
+    @Input()
+    public group: QueryParamGroup;
+
+    public changeCounter = 0;
+    public lastChange: string;
+
+    private destroy$ = new Subject<void>();
+
     constructor(@Inject(NGQP_ROUTER_ADAPTER) public routerAdapter: RouterAdapter) {
     }
 
+    public ngOnInit() {
+        if (this.group) {
+            this.group.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
+                this.changeCounter++;
+                this.lastChange = JSON.stringify(value);
+            });
+        }
+    }
+
+    public ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+
     public updateQueryParams(value: string) {
         const params: Params = {};
 

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

@@ -3,7 +3,7 @@
 <button type="button" (click)="setGroupValue()">Set Group</button>
 -->
 
-<demo-browser initialQueryParams="?q=Hello+World">
+<demo-browser [group]="paramGroup" initialQueryParams="?q=Hello+World">
     <ng-container [queryParamGroup]="paramGroup">
         <input type="text" class="form-control" placeholder="Search" queryParamName="searchText" />
 

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

@@ -31,12 +31,6 @@ export class PlaygroundComponent {
                 emptyOn: 2,
             }),
         });
-
-        this.paramGroup.valueChanges
-            .subscribe(value => console.log('group', { paramGroup: value }));
-
-        // this.paramGroup.get('searchText').valueChanges
-        //    .subscribe(value => console.log('searchText', { searchText: value }));
     }
 
     public setSearchTextValue(value: string) {