/Javascript/AngularJS/VideoTitle$ Angular 2 - communication between two sibling components

VideoTitle$ Angular 2 - communication between two sibling components

Because you are working with Observers and Observables in your service, 
you don't need to communicate both components because you can directly
 connect the service with the component template. This should be the code:

Service:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Subject }    from 'rxjs/Subject';
import 'rxjs/add/operator/map';

@Injectable()
export class AppService {
  private apiURL = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,contentDetails,status&maxResults=10&playlistId=PLSi28iDfECJPJYFA4wjlF5KUucFvc0qbQ&key=AIzaSyCuv_16onZRx3qHDStC-FUp__A6si-fStw&pretty=true";

  //Observable string sources
  private thisVideoTitle = new Subject<string>();
  //Observable string streams
  videoTitle$ = this.thisVideoTitle.asObservable();
  constructor(private http:Http) { }

  getData() {
    return this.http.get(this.apiURL)
      .map((res:Response)=> res.json())
      .subscribe(nameTitle => this.thisVideoTitle.next(nameTitle))
  }
}

part ii
Then if you want to use this into your component template it should be something like:
<li *ngFor="let title of videoTitle$ | async"></li>

Source: stackoverflow.com

Similar codes

0 vote337 views2 answers
Set @Output through modalref angular
Javascript AngularJS
0 vote361 views1 answer
Angular validar formulario
Javascript AngularJS
0 vote320 views1 answer
Loader service show hide unit test angular
Javascript AngularJS
0 vote313 views2 answers
Fs in angular
Javascript AngularJS
0 vote342 views1 answer
Phantomjs in angular
Javascript AngularJS
0 vote343 views1 answer
Read xlsx file in angular 5
Javascript AngularJS
5 votes307 views2 answers
Angular universal
Javascript AngularJS
3 votes315 views1 answer
Angular map
Javascript AngularJS
0 vote341 views1 answer
Angular http loader
Javascript AngularJS
0 vote316 views1 answer
Angular show text in template before data loads
Javascript AngularJS