feat(docs): Added a first skeleton of a proper bootstrap demo app

Author: Airblader

angular.json

@@ -58,7 +58,8 @@
                             "projects/ngqp-demo/src/assets"
                         ],
                         "styles": [
-                            "projects/ngqp-demo/src/styles.css"
+                            "projects/ngqp-demo/src/styles.css",
+                            "node_modules/bootstrap/dist/css/bootstrap.min.css"
                         ],
                         "scripts": []
                     },

package.json

@@ -23,7 +23,9 @@
     "@angular/platform-browser": "~7.1.0",
     "@angular/platform-browser-dynamic": "~7.1.0",
     "@angular/router": "~7.1.0",
+    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
     "@ngqp/core": "./projects/ngqp/core",
+    "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",

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

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { PlaygroundComponent } from './playground/playground.component';
+
+const routes: Routes = [
+    {
+        path: 'playground',
+        component: PlaygroundComponent,
+    },
+    {
+        path: '**',
+        redirectTo: '/playground',
+    },
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forRoot(routes),
+    ],
+    exports: [ RouterModule ],
+})
+export class AppRoutingModule {
+}

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

@@ -1,12 +1,23 @@
-<div [queryParamGroup]="paramGroup">
-    <input type="text" placeholder="Search" queryParamName="search" />
-    <button type="button" routerLink="./" [queryParams]="{q: 'foo'}" queryParamsHandling="merge">Go to ?q=foo</button>
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <img src="assets/logo.svg" height="48" width="auto" />
+    <a class="navbar-brand" routerLink="/">@ngqp</a>
+    <button class="navbar-toggler" type="button" (click)="isNavbarExpanded = !isNavbarExpanded">
+        <span class="navbar-toggler-icon"></span>
+    </button>
 
-    <br />
+    <div class="navbar-collapse" [class.collapse]="!isNavbarExpanded">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item active">
+                <a class="nav-link" href="/playground">Playground</a>
+            </li>
+        </ul>
+    </div>
+</nav>
 
-    <select queryParamName="type">
-        <option [value]="1">Dog</option>
-        <option [value]="2">Cat</option>
-        <option [value]="3">Mouse</option>
-    </select>
-</div>
+<div class="alert alert-danger" role="alert">
+    @ngqp is still under early development. This website currently serves only as a playground.
+</div>
+
+<main role="main" class="container mt-5">
+    <router-outlet></router-outlet>
+</main>

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

@@ -1,24 +1,11 @@
 import { Component } from '@angular/core';
-import { QueryParamBuilder, QueryParamGroup } from '@ngqp/core';
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
 })
 export class AppComponent {
 
-    public paramGroup: QueryParamGroup;
-
-    constructor(private queryParamBuilder: QueryParamBuilder) {
-        this.paramGroup = queryParamBuilder.group({
-            search: queryParamBuilder.param({
-                name: 'q',
-            }),
-            type: queryParamBuilder.param({
-                serialize: (value: number | null) => value === null ? null : `V${value}`,
-                deserialize: (value: string | null) => value ? +value[1] : 1,
-            }),
-        });
-    }
+    public isNavbarExpanded = false;
 
 }

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

@@ -1,18 +1,22 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-import { QueryParamModule } from '@ngqp/core';
-import { RouterModule } from '@angular/router';
+import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { QueryParamModule } from '@ngqp/core';
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { PlaygroundComponent } from './playground/playground.component';
 
 @NgModule({
     declarations: [
-        AppComponent
+        AppComponent,
+        PlaygroundComponent
     ],
     imports: [
         BrowserModule,
         FormsModule,
-        RouterModule.forRoot([]),
+        AppRoutingModule,
+        NgbModule,
         QueryParamModule
     ],
     providers: [],

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

@@ -0,0 +1,3 @@
+<ng-container [queryParamGroup]="paramGroup">
+    <input type="text" class="form-control" placeholder="Search" queryParamName="searchText" />
+</ng-container>

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

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { QueryParamBuilder, QueryParamGroup } from '@ngqp/core';
+
+@Component({
+    templateUrl: './playground.component.html',
+})
+export class PlaygroundComponent {
+
+    public paramGroup: QueryParamGroup;
+
+    constructor(private queryParamBuilder: QueryParamBuilder) {
+        this.paramGroup = queryParamBuilder.group({
+            searchText: queryParamBuilder.param({
+                name: 'q'
+            }),
+        });
+    }
+
+}