Passing data between components using a service Angular

Question

There are many examples around the web on this subject but none of them helped me. This is the scenario: I've got 2 components and a service. The two components aren't parent/children but are 2 independent components. One of them has a list of names, the other should load a table when one of the names is clicked. This is my home.html with both components

<div class="material-docs-app">
  <div class="docs-primary-header">
      <h1>Yep!</h1>
  </div>
    <div fxLayout="row" fxLayout.xs="column" class="component-layout-body">
        <app-heroes-sidenav></app-heroes-sidenav>
        <app-heroes-table #heroesTable fxFlex="1 2 calc(15em + 20px)" style="width: 100%"></app-heroes-table>
    </div>
</div>

Heroes sidenav component:

<div *ngIf="loadingData == true">
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</div>
<nav *ngIf="loadingData == false">
  <p *ngFor="let item of heroesNames.results let i = index" [attr.data-index]="i">
    <button mat-button (click)="getHero(i)">
        {{item.name}} 
    </button>
  </p>
</nav>

On click getHero() is called correctly. This is the sidenav component ts:

import { Component, OnInit, Input } from '@angular/core';
import {SwCharactersServiceService} from '../sw-characters-service.service';
import {HeroesTableComponent} from '../heroes-table/heroes-table.component';

@Component({
  selector: 'app-heroes-sidenav',
  templateUrl: './heroes-sidenav.component.html',
  styleUrls: ['./heroes-sidenav.component.css']
})
export class HeroesSidenavComponent implements OnInit {
  heroesNames: any;
  heroData:any;
  loadingData = true;
  @Input() heroesTable: HeroesTableComponent;
  constructor(private _swService: SwCharactersServiceService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes() {
    this._swService.getCharacters().then(result => {
      this.loadingData = false;
      this.heroesNames = result;
    });
  }

  getHero(index) {
    this._swService.getHero(index);
  }
}

and this is the service:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import 'rxjs/add/operator/map'

import {Observable} from 'rxjs/Observable';

@Injectable({
  providedIn: 'root'
})
export class SwCharactersServiceService {
  param:any;
  constructor(private http: HttpClient) { }

  getCharacters(): Promise<any[]> {
    return this.http.get<any[]>("https://swapi.co/api/people/")
    .toPromise()
    .then(result => result) 
    .catch(this.handleError);
  }

  getHero(index): Observable<any>{
    console.log(index);
    let headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');
    return this.http.get("https://swapi.co/api/people/" + index, {
        headers: headers
    }).map(res => res );
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }
}

I can correctly see the console.log(index) but the request doesn't work. There is no request initiated in chrome console network tab. This is the component with the table:

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import {SwCharactersServiceService} from '../sw-characters-service.service';

@Component({
  selector: 'app-heroes-table',
  templateUrl: './heroes-table.component.html',
  styleUrls: ['./heroes-table.component.css']
})
export class HeroesTableComponent implements OnInit {
  loadingData = true;
  heroData :any;
  subscription: Subscription;

  constructor(private _swService: SwCharactersServiceService) {
    this.subscription = this._swService.getHero(1).subscribe(result => { this.heroData = result; });
    console.log(this.heroData);
  }

  ngOnInit() {

  }

  ngOnDestroy() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
  }
}

There are 2 problems now:

1) As you can see I wrote this._swService.getHero(1) without passing a dynamic param. How does it work? How can I pass the correct index?

2) The service doesn't fire and I haven't got any result.

Is there any other way to do that?

Thanks.

Answer 1

You missed to subscribe to _swService.getHero(). If not subscribed to a method which returns an Observable, then it wont be invoked.

getHero(index) {
    this._swService.getHero(index).subscribe(
                  (resp) => {
                     // manipulate your response here
                     console.log(resp);  
                  },
                  (err) => {}
          );
}

Answer 2

you can use BehaviourSubject to pass the index value and send the query request as the list is cliked in the service

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
 public index: BehaviorSubject<number> = new BehaviorSubject<number>(null);

in the sidenav component

getHero(index) {
    this._swService.index.next(index);
  }

in the hero table component

ngAfterViewInit(){
   this._swService.index.subscribe(index=>{
      if(index){
        this._swService.getHero(index).subscribe(result => { this.heroData = result; });
      }
   })
}