fix(docs): Added documentation for QueryParamGroup #add / #remove

relates #44

Signed-off-by: Ingo Bürk <ingo.buerk@tngtech.com>

Author: Airblader

projects/ngqp-demo/src/app/demo.module.ts

@@ -34,6 +34,7 @@ import { GlobalConfigurationDocsComponent } from './docs-items/global-configurat
 import { CustomControlValueAccessorDocsComponent } from './docs-items/custom-control-value-accessor/custom-control-value-accessor-docs.component';
 import { ControlValueAccessorDirectiveExampleComponent } from './docs-items/examples/control-value-accessor-directive-example/control-value-accessor-directive-example.component';
 import { ManualWiringExampleComponent } from './docs-items/examples/manual-wiring-example/manual-wiring-example.component';
+import { AddRemoveParameterExampleComponent } from './docs-items/examples/add-remove-parameter/add-remove-parameter-example.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 
@@ -73,6 +74,7 @@ import { environment } from '../environments/environment';
         CustomControlValueAccessorDocsComponent,
         ControlValueAccessorDirectiveExampleComponent,
         ManualWiringExampleComponent,
+        AddRemoveParameterExampleComponent,
     ],
     imports: [
         BrowserModule,

projects/ngqp-demo/src/app/docs-items/examples/add-remove-parameter/add-remove-parameter-example.component.html

@@ -0,0 +1,21 @@
+<demo-example [markup]="markup" [typescript]="typescript">
+    <demo-browser [group]="paramGroup" initialQueryParams="?q=Hello+World">
+        <ng-container [queryParamGroup]="paramGroup">
+            <div class="alert alert-primary">
+                Use the button to add or remove the parameter bound to the input field. Try typing or changing the URL
+                when the parameter is detached.
+            </div>
+
+            <div class="input-group">
+                <div class="input-group-prepend">
+                    <button type="button" class="btn btn-primary" (click)="toggleParam()">
+                        <ng-container *ngIf="hasParam">Remove Parameter</ng-container>
+                        <ng-container *ngIf="!hasParam">Add Parameter</ng-container>
+                    </button>
+                </div>
+
+                <input type="text" autocomplete="off" class="form-control" [queryParamName]="hasParam ? 'param' : null" />
+            </div>
+        </ng-container>
+    </demo-browser>
+</demo-example>

projects/ngqp-demo/src/app/docs-items/examples/add-remove-parameter/add-remove-parameter-example.component.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { QueryParamBuilder, QueryParamGroup } from '@ngqp/core';
+
+declare const require: Function;
+
+@Component({
+    selector: 'demo-add-remove-parameter-example',
+    templateUrl: './add-remove-parameter-example.component.html',
+})
+export class AddRemoveParameterExampleComponent {
+
+    public paramGroup: QueryParamGroup;
+
+    public markup = require('!raw-loader!./add-remove-parameter-example.component.html');
+    public typescript = require('!raw-loader!./add-remove-parameter-example.component.ts');
+
+    constructor(private qpb: QueryParamBuilder) {
+        this.paramGroup = qpb.group({});
+
+        // Let's activate it by default
+        this.toggleParam();
+    }
+
+    public get hasParam(): boolean {
+        return !!this.paramGroup.get('param');
+    }
+
+    public toggleParam() {
+        if (this.hasParam) {
+            this.paramGroup.remove('param');
+        } else {
+            const param = this.qpb.stringParam('q');
+            this.paramGroup.add('param', param);
+        }
+    }
+
+}

projects/ngqp-demo/src/app/docs-items/model-usage/model-usage-docs.component.html

@@ -22,6 +22,16 @@ <h3>Accessing individual parameters</h3>
     </p>
     <demo-snippet type="typescript" [code]="qpgGetSnippet"></demo-snippet>
 
+    <docs-fragment fragment="QueryParamGroup-add-remove">
+        <h3>Adding and removing parameters</h3>
+    </docs-fragment>
+    <p>
+        You can dynamically add or remove parameters to or from a group by using <span apiDocsLink>QueryParamGroup#add</span>
+        and <span apiDocsLink>QueryParamGroup#remove</span>, respectively. Adding a parameter will resynchronize the entire
+        group with the URL.
+    </p>
+    <demo-add-remove-parameter-example></demo-add-remove-parameter-example>
+
     <docs-fragment fragment="QueryParamGroup-value">
         <h3>Reading the current value</h3>
     </docs-fragment>