Angular 2: get data from http in parent component and subscribe to it nested

Question

I plan to make such an architecture:

• store component
• - nested book component

in store - I have a service call that receives data from the service, and I subscribe to the result. As described in angular2 docs (http).

And I want to use this data in nested components: in forms ( formBuilder ), in material design elements, etc.

What is the best way to do this? I am new to angular2.

Store:

 book: IBook; constructor(private bookService: BookService) { } ngOnInit() { this.bookService.getBook('1') .subscribe((book) => { this.book = book; }); } 

BookService:

 ... getBook (id): Observable<IBook> { return this.http.get(this.url + '/' + id) .map(this.extractData) .catch(this.handleError); } private extractData(res: Response) { let body = res.json(); return body || { }; } ... 

Book:

 @Input() book:IBook; constructor() {} ngOnInit() { /*How here can i subscribe on book http data get?, so that i can use async value in forms etc?*/ }); 

Because if I use async book everywhere (not formBuilder) - everything is fine, but formBuilder needs to update the values ​​after loading the data into the parent component. How can i do this?

Answer 1

How to pass bookID to BookComponent and allow BookComponent handle async http get in ngInit ?

 export class Book implements OnInit { @Input() bookID: number; private book: IBook; constructor(private bookService: BookService) {} ngOnInit() { this.bookService.getBook(this.bookID) .subscribe((book) => { this.book = book; }); } } 

Otherwise, you have several options that are explained in https://angular.io/docs/ts/latest/cookbook/component-communication.html

I will briefly talk about two ways that I think you could use.

Change input properties using ngOnChanges

 export class Book implements OnChanges { @Input() book: IBook; ngOnChanges(changes: {[propKey: string]: SimpleChange}) { for (let propName in changes) { // handle updates to book } } } 

Additional information https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Parent and child contacts through the service

 @Injectable() export class BookService { books = new Subject<IBook>(); getBook(id): Observable<IBook> { return this.http.get(this.url + '/' + id) .map(d => { let book = this.extractData(d); this.books.next(book); return book; }) .catch(this.handleError); } ... } @Component({ selector: 'book', providers: [] }) export class Book implements OnDestroy { book: IBook subscription: Subscription; constructor(private bookService: BookService) { this.subscription = bookService.books.subscribe( book => { this.book = book; }); } ngOnDestroy() { this.subscription.unsubscribe(); } } @Component({ selector: 'store', providers: [BookService] }) export class Store { book: IBook; constructor(private bookService: BookService) { } ngOnInit() { this.bookService.getBook('1') .subscribe((book) => { this.book = book; }); } }