Breaking News: Grepper is joining You.com. Read the official announcement!

videoTitle$ Angular 2 - communication between two sibling components

Aamir Farooq answered on October 25, 2021 Popularity 1/10 Helpfulness 1/10

answer videoTitle$ Angular 2 - communication between two sibling components

videoTitle$ Angular 2 - communication between two sibling components

Comment

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>

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: angular between communication components javascript

Link to this answer
Share Copy Link

Contributed on Oct 25 2021

Aamir Farooq

0 Answers Avg Quality 2/10

videoTitle$ Angular 2 - communication between two sibling components

Contents

More Related Answers

videoTitle$ Angular 2 - communication between two sibling components

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.