CODEWITHSUNDEEP
angular
Sonal
Sonal

Reputation: 188

Angular 2 - communication between two sibling components

I am using an API to get the list of videos. I have been trying to print the current (clicked) video's details from videoItemComponent to detailsComponent. Both are the children of same parent and sharing common service. when I click the image in the list it should open the video with its details. What I am unable to do is print the details of clicked video on details page. Below is my code:

//VideoItemComponent:

import { Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'app-video-item',
  templateUrl: './video-item.component.html',
  styleUrls: ['./video-item.component.scss']
})
export class VideoItemComponent implements OnInit {
  @Input() item: any;
  vidTitle : string;
  vidDesc : any;
  vidDate : any;
  constructor() { }

  ngOnInit() {
  }

    clickMe(event){
      this.vidTitle = this.item.snippet.title;
      this.vidDesc = this.item.snippet.description;
      this.vidDate = this.item.snippet.publishedAt;
      console.log(this.vidTitle);
      console.log(this.vidDesc);
      console.log(this.vidDate);
      return this.vidTitle;
    }

}

//DetailsComponent: 

import { Component, OnInit, Input } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AppService } from '../app.service';
import { Subscription }   from 'rxjs/Subscription';
@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.scss']
})
export class DetailsComponent implements OnInit {
  id : string;
  private player;
  private ytEvent;
  myData;
  name;
  title;
  subscription: Subscription;
  videoTitle: string;
  vidTitle: string;
  constructor(private appService : AppService, private route : ActivatedRoute) { 
    this.id = route.snapshot.params['videoId'];
    //this.title = route.snapshot.params['etag'];
    this.subscription = appService.videoTitle$.subscribe(
      videoTitle => {
        this.vidTitle = videoTitle;
        console.log('details');
        console.log(videoTitle);
        //this.id = imageId;
        //console.log (this.id);
        //return imageId;

    });
  }

  ngOnInit() {
    this.appService.getData().subscribe(data=> {
      console.log(data);
      this.myData = data;

    })
  //   this.name = this.route.params.subscribe(params => {
  //   this.title = params['title']; // (+) converts string 'id' to a number
  // });
  }
  onStateChange(event) {
    this.ytEvent = event.data;
  }
  savePlayer(player) {
    this.player = player;
  }

  playVideo() {
    this.player.playVideo();
  }

  pauseVideo() {
    this.player.pauseVideo();
  }

}

So basically I want to print the values i have got from clickMe() method in videoItemComponent in detailsComponent. I am stuck since long please help.

Upvotes: 1

Views: 330

Answers (1)

axl-code
axl-code

Reputation: 2274

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))
  }
}

Then if you want to use this into your component template it should be something like:

<li *ngFor="let title of videoTitle$ | async"></li>

Upvotes: 2

Related Questions