Simplify angular demo

- Use ngx-pipes to transform object to array of pairs
- Extract GunDb in its own file
- Introduce deletion

examples/angular/package.json

@@ -24,7 +24,9 @@
     "express-http-proxy": "^0.11.0",
     "gun": "^0.7.2",
     "gun-edge": "^0.8.8",
+    "ngx-pipes": "^1.5.10",
     "rxjs": "^5.3.0",
+    "underscore": "^1.8.3",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {

examples/angular/src/app/app.component.html

@@ -6,6 +6,6 @@
   </form>
   <br />
   <ul>
-    <li *ngFor="let todo of todos$ | async">{{todo.val}}</li>
+    <li *ngFor="let todo of todos$ | async | pairs" (click)="delete(todo[0])">{{todo[1]}}</li>
   </ul>
 </div>

examples/angular/src/app/app.component.ts

@@ -2,8 +2,10 @@ import { Component, OnInit } from '@angular/core';
 import { $rx } from 'gun-edge/edge/observable/rx';
 import Gun from 'gun/gun';
 import { Observable } from 'rxjs/Observable';
+import { GunDb } from 'app/gun.service';
+import { omit } from 'underscore';
 
-import { GunDb } from 'app/app.module';
+import { Subject } from 'rxjs/Subject';
 
 @Component({
   selector: 'app-root',
@@ -15,19 +17,20 @@ export class AppComponent implements OnInit {
 
   todos = this.db.gun.get('todos');
   todos$: Observable<string[]> = $rx(this.todos)
-    .startWith([])
-    .map(o => Object.keys(o).filter(k => typeof o[k] === 'string').map(k => ({ key: k, val: (o[k] as string) })));
+    .map(o => omit(o, '_'));
 
   constructor(private db: GunDb) { }
 
-  ngOnInit() {
-    $rx(this.todos).subscribe(x => console.log(x));
-  }
+  ngOnInit() { }
 
   add() {
     if (this.newTodo) {
       this.todos.path(Gun.text.random()).put(this.newTodo);
       this.newTodo = '';
     }
   }
+
+  delete(key: string) {
+    this.todos.path(key).put(null);
+  }
 }

examples/angular/src/app/app.module.ts

@@ -3,10 +3,10 @@ import { NgModule, Injectable } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { Observable } from 'rxjs/Observable';
-
-import Gun from 'gun/gun';
+import { NgPipesModule } from 'ngx-pipes';
 
 import { AppComponent } from './app.component';
+import { GunDb } from 'app/gun.service';
 
 @NgModule({
   declarations: [
@@ -15,15 +15,10 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    NgPipesModule
   ],
   providers: [GunDb],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
-
-@Injectable()
-export class GunDb {
-
-  readonly gun = Gun(location.origin + '/gun');
-}

examples/angular/src/main.ts

@@ -4,7 +4,6 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
-import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/startWith';
 
 if (environment.production) {