use gun for todo list

examples/angular/src/app/app.component.css

@@ -0,0 +1,7 @@
+html, body { font-size: 14pt; padding: 10px 2.5%;}
+.hide { display: none; }
+form .who { width: 10%; }
+form .what { width: 80%; }
+ul { list-style: none; padding: 0; }
+ul .when {color: #555; font-size: 12pt; float: right; display: none; }
+li:hover .when {display: inline;}

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

@@ -1,3 +1,11 @@
-<h1>
-  {{title}}
-</h1>
+<div>
+
+  <form (ngSubmit)="add()">
+    <input type="text" [(ngModel)]="newTodo" name="newTodo" placeholder="New TODO">
+    <button type="submit" *ngIf="newTodo" [disabled]="newTodo?.trim().length === 0">Add</button>
+  </form>
+  <br />
+  <ul>
+    <li *ngFor="let todo of todos$ | async">{{todo.val}}</li>
+  </ul>
+</div>

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

@@ -1,10 +1,33 @@
-import { Component } from '@angular/core';
+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/app.module';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'app works!';
+export class AppComponent implements OnInit {
+  newTodo = '';
+
+  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) })));
+
+  constructor(private db: GunDb) { }
+
+  ngOnInit() {
+    $rx(this.todos).subscribe(x => console.log(x));
+  }
+
+  add() {
+    if (this.newTodo) {
+      this.todos.path(Gun.text.random()).put(this.newTodo);
+      this.newTodo = '';
+    }
+  }
 }

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

@@ -1,7 +1,10 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+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 { AppComponent } from './app.component';
 
@@ -14,7 +17,13 @@ import { AppComponent } from './app.component';
     FormsModule,
     HttpModule
   ],
-  providers: [],
+  providers: [GunDb],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
+
+@Injectable()
+export class GunDb {
+
+  readonly gun = Gun(location.origin + '/gun');
+}