import { Component, OnInit } from '@angular/core';
import {AngularFireDatabase} from 'angularfire2/database';
import { OnDestroy } from '@angular/core/src/metadata/lifecycle_hooks';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
import { AngularFireObject } from 'angularfire2/database/interfaces';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  courses$;
  itemRef:AngularFireObject<any>;
  courses:any[];
  subscription: Subscription;

  constructor(private db:AngularFireDatabase){
    this.courses$ = db.list('/courses').valueChanges();
    this.courses$ = this.db.list('courses').snapshotChanges().map(changes => {
      return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
  })
  }

  addCourse(author, title)
  {
    let course = {
      author:author.value,
      title:title.value,
    }
    this.db.list('courses').push(course);

  }
removeCourse(course:string)
{
  console.log(course);
  this.db.list('courses').remove(course)
}
}

//template

<mat-form-field class="example-full-width">
    <input matInput placeholder="Nazwa" #title/>
  </mat-form-field>
  <br>
<mat-form-field class="example-full-width">
    <input matInput placeholder="Autor" #author/>
  </mat-form-field>
<br>

<button mat-button (click)="addCourse(author, title)">Dodaj</button>

  <!!*=|>
      {{course.title}} || {{course.author}}
      <button (click)="removeCourse(course.key)">Usuń</button>
      </div>