/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 vote192 views1 answer
Angular material slide effect button click
Javascript AngularJS
0 vote197 views1 answer
Angular view not changing on model
Javascript AngularJS
0 vote197 views1 answer
Chartjs angular bar beginAtZero
Javascript AngularJS
37 votes369 views4 answers
Angularjs date
Javascript AngularJS
3 votes246 views4 answers
Router-outlet' is not a known element angular
Javascript AngularJS
0 vote235 views1 answer
Select all checkbox in angular
Javascript AngularJS
0 vote199 views1 answer
How to add toaster in angular 9
Javascript AngularJS
2 votes191 views2 answers
Angularjs 1.5.6 cdn
Javascript AngularJS
2 votes204 views1 answer
How to get http request and store the response in a variable in angular
Javascript AngularJS
0 vote182 views1 answer
Angular get firebase firestore
Javascript AngularJS