Component communication using services

I have three components and one service. components(app-component, home-component, movie detail-component). by using routers am loading the home-component into app-component. in home-component am rendering the array of movie objects into it using service(where am getting the array using HTTP). now when someone clicks on the single movie object in the home-component. I am passing that particular object into the function. and I want to render that particular object into the moviedetail-component using navigate router without using the movie detail directive. here am using the service to pass the data from home component to movie detail component.

 

when I use the moviedetial directive into the homecomponent, am able to render the particular object. but am not able to do so, using the service as a bridge between two components. I want to navigate to moviedetial component only using navigate router because I don't want to show the details of the movie in the home page.

 

home-component.html

 

 

home-component.ts

 

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

import { SharedService } from '../shared-serive';

import { Router } from '@angular/router';

@Component({

selector: 'app-homepage',

templateUrl: './homepage.component.html',

styleUrls: ['./homepage.component.css']

})

export class HomepageComponent implements OnInit {

constructor(private _sharedservice:SharedService, private _router:Router) { }

ngOnInit() {

}

senddatatoservice(movie){

this._sharedservice.getdata(movie);

this._router.navigate(["/moviedetails"]);

}

}

 

shared.service

 

import { Injectable } from '@angular/core';

import { Http } from '@angular/http';

import { Subject } from 'rxjs';

@Injectable({

providedIn: 'root'

})

export class MovieService {

private passdata = new Subject();

obpassdata = this.passdata.asObservable();

constructor(private _http:Http) { }

getdata(data){

this.passdata.next(data);

}

}

movie-detail.component.ts

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

import { SharedService } from '../shared-serive';

@Component({

selector: 'app-movie-details',

templateUrl: './movie-details.component.html',

styleUrls: ['./movie-details.component.css']

})

export class MovieDetailsComponent implements OnInit {

singlemovie:any;

constructor(private _sharedservice:SharedService) { }

ngOnInit() {

this._sharedservice.getdata().subscribe((Response)=>{

this.singlemovie = Response;

})

}

}

 

Hope u understood my issue.