0

I have a list of restaurants and when clicking on one of them I want the EventEmitter to take the restaurant component information and supply the details component with it. I am trying with the following code. When I'm running getRestaurantDetails() the console log prints out the name of the restaurant but I think it might be not emmiting or being able to subcribe to the emitter. In the details.ts the first console log is triggered and the second and the third one are not. Please help me out. I've trying to figure it out all day.

restaurant.ts

import { Component, Input } from '@angular/core';
    import {Restaurant} from "./restaurant.model";
    import {RestaurantService} from "./restaurant.service";


    @Component({
      selector: 'app-restaurant',
      templateUrl: './restaurant.component.html',
      styleUrls: ['./restaurant.component.css']
    })
    export class RestaurantComponent {
      @Input() restaurant: Restaurant;


      constructor(private restaurantService: RestaurantService){

      }

      onSelect(){
        this.restaurantService.getRestaurantDetails(this.restaurant);
      }
    }

service.ts

import {Restaurant} from "./restaurant.model";
import {Http,Response } from "@angular/http";
import {Injectable,EventEmitter, Output} from "@angular/core"
import 'rxjs/Rx';
import {Observable} from "rxjs";

@Injectable()
export class RestaurantService{
    private restaurants: Restaurant[]=[];
    @Output() restaurantIsSelected = new EventEmitter<Restaurant>();

    constructor(private http: Http){

    }
getRestaurantDetails(restaurant: Restaurant){
        this.restaurantIsSelected.emit(restaurant);
        console.log(restaurant.name);
    }
    getRestaurantEmitter() {
        return this.restaurantIsSelected;
    }
}

details.ts

import { Component, OnInit } from '@angular/core';
import {Restaurant} from "./restaurant.model";
import {RestaurantService} from "./restaurant.service";

@Component({
  selector: 'app-restaurant-details',
  templateUrl: './restaurant-details.component.html',
  styleUrls: ['./restaurant-details.component.css']
})
export class RestaurantDetailsComponent implements OnInit{
  restaurant: Restaurant;

  constructor(private restaurantService: RestaurantService){}




  ngOnInit(){
    console.log("lol");

    this.restaurantService.getRestaurantEmitter().subscribe(
        (restaurant: Restaurant)=>{
      console.log(restaurant);
      console.log("lol");

      this.restaurant=restaurant;
    });
  }
}
fryjabe
  • 3
  • 2
  • You need to add your RestaurantService to the providers section in your app.module.ts. Have you done that? – Benedikt May 07 '17 at 13:51
  • 5
    A service doesn't have outputs. outputs are for components and directives only. Use an RxJS Subject in your service. And choose better names for your methods: getRestaurantDetails() should return the details of a restaurant. Not emit anything. It's also very unclear when the RestaurantDetailsComponent is instantiated and where it's used. Post a complete minimal plunkr reproducing the problem. – JB Nizet May 07 '17 at 13:51
  • @Benedikt I have done that – fryjabe May 07 '17 at 13:53
  • You could use `EventEmitter` in a service but it is a bad practice, use an rxjs `Subject` instead. `Output()` in a service is definitely wrong. – Aluan Haddad May 07 '17 at 13:54
  • @AluanHaddad why is it a bad practice? shouldn't it work though? I see the rxjs Subject is not an easy search and I suppose getting the data of the component when clicking on it and displaying that data in another component should not be that big of a deal or am I wrong? – fryjabe May 07 '17 at 14:19
  • Because EventEmitter is implemented using an observable but the incidental interface that comes from that could change so exposing it as a standard observable is not a great idea. Subject is indeed complex but so is event emitter. – Aluan Haddad May 07 '17 at 14:20
  • @JBNizet and AluanHaddad: I am curious too, why the comments here say that using `EventEmitter` in a service is not good practice, and to use `Subject` instead. `EventEmitter` extends `Subject` after all. Why not use it in a service? Just a matter of opinion? – R. Richards May 07 '17 at 14:25
  • The documentation says: *Use by directives and components to emit custom Events.* Using it in service will probably work, but since it is not the way it's intended to be used, you might have problems later because you just didn't respect the intended, documented usage. – JB Nizet May 07 '17 at 15:32

0 Answers0