rajesh dn

rajesh dn

  • NA
  • 12
  • 439

Component communication using services

Feb 6 2019 12:25 AM
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
 
<ul>
<li *ngFor="let movie of movies">{{movie.name}}-{{movie-storyline}}
<button (click)="senddatatoservice(movie)"></button>
</li>
<ul>
 
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<any>();
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.

Answers (2)