title: passing value from service to component
body: <p>I am having a real problem passing a variable from a service (LibraryService) down to a component which is one level deeper in the directory structure (ReadingPaneComponent). This is after I won a pitched battle getting this variable into the service from a component which is TWO levels deeper (AuthorsComponent). Effectively, the ReadingPaneComponent is therefore an "aunt/uncle" to the AuthorsComponent, hence my trying to send the variable via the existing LibraryService, which also serves to draw down data from my backend database.</p>
  
  <p>All I am trying to do is pass a number of up to five digits which represents the ID of a book into the ReadingPaneComponent. The number is detected perfectly well by the service but I cannot for love nor money get it into the ReadingPaneComponent as anything other than 'undefined'. I am also calling a method defined in the ReadingPaneComponent from the AuthorsComponent when the user clicks on a book title, so this may be an issue with asynchronous calls or what lifecycle hook the method in the ReadingPaneComponent should sit in (current ngOnInit but I recognise this is probably wrong, and have tried alternatives to no avail).</p>
  
  <p>This is the relevant code from <strong>library.service.ts</strong>: -</p>
  
  <pre><code>import { Injectable, Component, Input } from '@angular/core';
  import { HttpClient, HttpResponse, HttpHeaders } from '@angular/common/http';
  import { Language } from '../shared/language.model';
  import { Author } from '../shared/author.model';
  import { Book } from '../shared/book.model';
  import { environment } from '../../environments/environment';
  import { Observable } from 'rxjs/observable';
  import { Subject } from 'rxjs/Subject';
  import { AngularFireModule } from 'angularfire2';
  import { AngularFireDatabaseModule } from 'angularfire2/database';
  import {
    AngularFireDatabase,
    AngularFireList,
    AngularFireObject } from 'angularfire2/database';
  import { AngularFireAuthModule } from 'angularfire2/auth';
  
  @Injectable()
  export class LibraryService {
    private chosenBookSource = new Subject&lt;number&gt;();
    chosenBook$ = this.chosenBookSource.asObservable();
  
  // MORE CODE HERE
  
  chosenBook(data) {
      console.log(data); //This shows the correct ID of the book clicked by the user, so I know this is working properly.
      this.chosenBookSource.next(data);
      return data;
    }
  </code></pre>
  
  <p>This is from <strong>reading-pane.component.ts</strong>: -</p>
  
  <pre><code>import { Component, OnInit, Input, OnDestroy } from '@angular/core';
  import { LibraryService } from '../library.service';
  import { Language } from '../../shared/language.model';
  import { Author } from '../../shared/author.model';
  import { Book } from '../../shared/book.model';
  import { Observable } from 'rxjs/observable';
  
  @Component({
    selector: 'app-reading-pane',
    templateUrl: './reading-pane.component.html',
    styleUrls: ['./reading-pane.component.css'],
    providers: [LibraryService]
  })
  export class ReadingPaneComponent implements OnInit, OnDestroy {
    @Input() bookPGID: number;
    public bookHTML;
  
    constructor(private libraryService: LibraryService) {
    }
  
    ngOnInit() {
      console.log(this.libraryService.chosenBook$);
      this.libraryService.chosenBook$.subscribe(data =&gt; (this.bookPGID = data));
      console.log(this.bookPGID);
      this.libraryService
        .loadBook(this.bookPGID)
        .subscribe((book: Observable&lt;any&gt;) =&gt; (this.bookHTML = book));
    }
  </code></pre>
  
  <p>The call in the AuthorsComponent works because it does trigger the <code>loadBook</code> function in the ReadingPaneComponent, it's just that the ID number does not survive the journey from the LibraryService into the ReadingPaneComponent.</p>
  
  <p>Any help would be gratefully received.</p>