app.component.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Book } from './models/book';
import { BooksService } from './services/books-service';

@Component({
	selector: 'books-app',
	template: `
		<books-header></books-header>
		<book-card
			*ngFor="let book of books$ | async"
			[book]="book"
			[inCollection]="isBookInCollection"
			(add)="onAdd()"
			(remove)="onRemove()">
		</book-card>
	`
})
export class BooksAppComponent {
	books$: Observable<Book[]>;

	isBookInCollection = false;

	constructor(service: BooksService) {
		this.books$ = service.getBooks();
	}

	onAdd() {
		this.isBookInCollection = true;
	}

	onRemove() {
		this.isBookInCollection = false;
	}
}