docs(asyncpipe): add async pipe demo example

Author: nivekcode

projects/ng-sortgrid-demo/src/app/app.component.html

@@ -3,7 +3,7 @@
 
 <div class="container">
   <h1>1. Getting started</h1>
-  <ngsg-demo-step title="Loop over your elements with *ngFor. 🛎️ the items needs to be an array." image="gs1.png"></ngsg-demo-step>
+  <ngsg-demo-step title="Loop over your elements with *ngFor. 🛎️ the items needs to be an array. Alternate you can also use the async pipe - see below" image="gs1.png"></ngsg-demo-step>
   <ngsg-demo-step title="Apply the ngSortgridItem directive" image="gs2.png"></ngsg-demo-step>
   <ngsg-demo-memory></ngsg-demo-memory>
 
@@ -22,6 +22,11 @@ <h1>3. Group sortgrids</h1>
   one group in another group.</p>
   <ngsg-demo-step title="Pass in a unique name to the ngSortGridGroup input" image="gs5.png"></ngsg-demo-step>
   <ngsg-demo-groups-memory></ngsg-demo-groups-memory>
+
+  <hr class="chaptor-separator"/>
+  <h1>4. Use the async pipe</h1>
+  <ngsg-demo-step title="Use the async pipe to loop over the items and to pass in the ngSortGridItems" image="gs6.png"></ngsg-demo-step>
+  <ngsg-demo-async></ngsg-demo-async>
 </div>
 
 <footer class="py-5 bg-dark">

projects/ng-sortgrid-demo/src/app/app.module.ts

@@ -10,6 +10,7 @@ import {StepComponent} from './examples/step/step.component';
 import {ReactOnChangesMemoryComponent} from './examples/react-on-changes/react-on-changes-memory.component';
 import {GroupsMemoryComponent} from './examples/groups/groups-memory.component';
 import {CardComponent} from './examples/card/card.component';
+import {AsyncPipeMemoryComponent} from './examples/async-pipe/async-pipe-memory.component';
 
 @NgModule({
   declarations: [
@@ -20,7 +21,8 @@ import {CardComponent} from './examples/card/card.component';
     StepComponent,
     ReactOnChangesMemoryComponent,
     GroupsMemoryComponent,
-    CardComponent
+    CardComponent,
+    AsyncPipeMemoryComponent
   ],
   imports: [BrowserModule, NgsgModule],
   providers: [],

projects/ng-sortgrid-demo/src/app/examples/async-pipe/async-pipe-memory.component.css

@@ -0,0 +1,41 @@
+.spinner {
+  width: 40px;
+  height: 40px;
+
+  position: relative;
+  margin: 100px auto;
+}
+
+.double-bounce1, .double-bounce2 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #333;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+  animation: sk-bounce 2.0s infinite ease-in-out;
+}
+
+.double-bounce2 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+@-webkit-keyframes sk-bounce {
+  0%, 100% { -webkit-transform: scale(0.0) }
+  50% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bounce {
+  0%, 100% {
+    transform: scale(0.0);
+    -webkit-transform: scale(0.0);
+  } 50% {
+      transform: scale(1.0);
+      -webkit-transform: scale(1.0);
+    }
+}

projects/ng-sortgrid-demo/src/app/examples/async-pipe/async-pipe-memory.component.html

@@ -0,0 +1,21 @@
+<h5 style="margin-bottom: 20px">4. Load items and use them with the async pipe</h5>
+<button style="margin-bottom: 20px" class="btn btn-primary" (click)="loadItems()">Load items</button>
+<div class="card border-primary mb-3">
+  <div class="card-body">
+    <h1 class="card-title">Sort order</h1>
+    <h2 class="card-text">{{ sortOrder }}</h2>
+  </div>
+</div>
+<div class="example-container">
+  <div *ngIf="loading" class="spinner">
+    <div class="double-bounce1"></div>
+    <div class="double-bounce2"></div>
+  </div>
+  <ngsg-card *ngFor="let item of item$ | async"
+             ngSortgridItem
+             [ngSortGridItems]="item$ | async"
+             [item]="item"
+             (sorted)="applyOrder($event)"
+             class="example-box">
+  </ngsg-card>
+</div>

projects/ng-sortgrid-demo/src/app/examples/async-pipe/async-pipe-memory.component.ts

@@ -0,0 +1,28 @@
+import {Component} from '@angular/core';
+import {Observable, of} from 'rxjs';
+import {delay, tap} from 'rxjs/operators';
+
+@Component({
+  selector: 'ngsg-demo-async',
+  templateUrl: './async-pipe-memory.component.html',
+  styleUrls: ['./async-pipe-memory.component.css', '../memory-demo.css']
+})
+export class AsyncPipeMemoryComponent {
+
+  item$: Observable<number[]>;
+  loading = false;
+  public sortOrder: number[];
+
+  public loadItems(): void {
+    this.loading = true;
+    this.item$ = of([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).pipe(
+      delay(1500),
+      tap(() => this.loading = false)
+    );
+  }
+
+  public applyOrder(newOrder: number[]): void {
+    this.sortOrder = newOrder;
+  }
+
+}