Add, update and remove method have been implemented

src/app/app.component.html

@@ -1,11 +1,9 @@
 <ul>
-    <li *ngFor="let item of items | async">
-      <span (click)=selectItem(item) >{{ item.item.name }}</span>
-    </li>
+  <li *ngFor="let item of items | async">
+    <span (click)=selectItem(item)>{{ item.name }}</span>
+  </li>
 </ul>
-<input [(ngModel)]="test" />
-
 
 <span class="app-action">
   <button md-fab (click)="openDialog()" ><md-icon>playlist_add</md-icon></button>
-</span>
+</span>

src/app/app.component.ts

@@ -5,8 +5,8 @@ import { ItemDialogComponent } from './item-dialog/item-dialog.component';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  template: require('./app.component.html'),
+  styles: [require('./app.component.css')]
 })
 export class AppComponent {
   dialogRef: MdDialogRef<ItemDialogComponent>;
@@ -16,17 +16,18 @@ export class AppComponent {
   constructor(private af: AngularFire, public dialog: MdDialog) {
     this.items = af.database.list('/items');
     console.log(this.items);
-    this.selectedItem = 'prova';
+    this.selectedItem = { name: 'Prova' };
   }
 
-  click(item) {
+  selectItem(item) {
     console.log(item);
     this.selectedItem = item;
+    this.openDialog();
   }
 
   add() {
     console.log('add new item');
-    const newItem = {item: { name: 'Test'}};
+    // const newItem = {item: { name: 'Test'}};
     // this.items.push(newItem);
   }
 
@@ -35,15 +36,38 @@ export class AppComponent {
       disableClose: false,
     });
 
+    this.dialogRef.componentInstance.newItem = this.selectedItem;
+
     this.dialogRef.afterClosed().subscribe(result => {
       console.log('result: ' + result);
       this.dialogRef = null;
-      if(result) {
-        const newItem = {item: { name: result}};
-        console.log(newItem);
-        this.items.push(newItem)
+      if (result) {
+        if (result.delete) {
+          if (result.item && result.item.$key) {
+            this.items.remove(result.item.$key);
+          }
+        } else {
+          const key = result.$key;
+          if (key) {
+            delete result['$key'];
+            delete result['$exists'];
+            this.items.update(key, result);
+          } else {
+            console.log(result);
+            this.items.push(result);
+          }
+        }
       }
     });
   }
 
 }
+
+
+
+// WEBPACK FOOTER //
+// /home/fgiaffaglione/angular2/demo/~/angular2-template-loader!/home/fgiaffaglione/angular2/demo/src/app/app.component.ts
+
+
+// WEBPACK FOOTER //
+// /home/fgiaffaglione/angular2/demo/~/angular2-template-loader!/home/fgiaffaglione/angular2/demo/src/app/app.component.ts

src/app/item-dialog/item-dialog.component.html

@@ -1,10 +1,11 @@
 <md-card class="app-input-section">
-  <md-input [(ngModel)]="firstname" placeholder="First name"></md-input>
+  <md-input [(ngModel)]="newItem.name" placeholder="First name"></md-input>
   <md-input placeholder="Last name"></md-input>
 </md-card>
 
 
 
 <button md-raised-button type="button" color="primary" 
-    (click)="dialogRef.close(firstname)" md-tooltip="This is a tooltip!">Yes</button>
-<button md-raised-button type="button" (click)="dialogRef.close()">No</button>
+    (click)="dialogRef.close(newItem)" md-tooltip="This is a tooltip!">Salva</button>
+<button md-raised-button type="button" (click)="dialogRef.close()">Annulla</button>
+<button md-raised-button type="button" (click)="dialogRef.close({item: newItem, delete:true})">Rimuovi</button>

src/app/item-dialog/item-dialog.component.ts

@@ -1,16 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { MdDialogRef } from '@angular/material';
 
 @Component({
   selector: 'app-item-dialog',
   templateUrl: './item-dialog.component.html',
   styleUrls: ['./item-dialog.component.css']
 })
-export class ItemDialogComponent {
-  firstname: string;
+export class ItemDialogComponent implements OnInit {
+  newItem: any;
 
-  constructor(public dialogRef: MdDialogRef<ItemDialogComponent>) { 
-    this.firstname = '';
+  constructor(public dialogRef: MdDialogRef<ItemDialogComponent>) {
+  }
+
+  ngOnInit() {
   }