notes.ts

import { Component, OnDestroy } from '@angular/core';
import { NoteCard, NoteCreator} from '../ui';
import { NoteService } from '../services';
import { Store } from '../store';
import 'rxjs/Rx';
import {Subscription} from 'rxjs/Rx';


@Component ({
    selector: "notes-container",
    directives: [NoteCard, NoteCreator],
    styles: [`
.notes {
  padding-top: 50px;
}
.creator {
  margin-bottom: 40px; 
}
`],
    template: `
    <div class="row center-xs notes">
      <div class="col-xs-6 creator">
        <note-creator (createNote)="onCreateNote($event)"></note-creator>
      </div>
      <div class="notes col-xs-8">
        <div class="row between-xs">
          <note-card
            class="col-xs-4"
            *ngFor="let note of notes; let i = index"
            (checked)="onNoteChecked($event,i)"
            [note]="note"
          >
          </note-card>
        </div>
      </div>
    </div>`
})
export class Notes implements OnDestroy{
    notes = [];
    subscription: Subscription;
    constructor(private noteSevice:NoteService, private store:Store){
      console.log("subscribing");
      this.subscription = this.store.changes.pluck('notes').subscribe((notes:any) => this.notes = notes);
      this.noteSevice.getNotes();
    }

    ngOnDestroy() {
      this.subscription.unsubscribe();
      console.log("I am Destroyed");
    }

    onNoteChecked(note, i) {
      this.noteSevice.completeNote(note).subscribe();
    }

    onCreateNote(note) {
      this.noteSevice
      .createNote(note)
      .subscribe();
    }
}