Subscribing to event created and emitted from a service

Question

I am trying to subscribe to an event with a component to get data from an event which is emitted from a service I have created. I am very new to Angular and I am struggling to get my head around this! When the user selects a recipe from the list of recipes, the full recipe (including ingredients) should be displayed. At the moment I am logging the selected recipe to the console but I am just getting the constructor which I made in the model file

Here is the recipes.html file:

<div *ngFor="let recipe of recipes" class="list-item">
    <a 
    href="#"
    class="list-group-item clearfix"
    (click)="onRecipeSelected(recipe)">
    <img 
        [src]="recipe.imagePath" 
        alt="{{ recipe.name }}"
        class="img-responsive">
    <div class="pull-left">
        <h4 class="list-group-item-heading item-text">{{ recipe.name }}</h4>
        <p class="list-group-item-text item-text">{{ recipe.description }}</p>
    </div>
</a>
</div>  

here is the recipes.ts file:

import { Component, OnInit, Input } from '@angular/core';
import { Recipe } from './recipes.model';
import { Recipeservice } from './recipes.service';

@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.component.html',
  styleUrls: ['./recipes.component.css'],
})
export class RecipesComponent implements OnInit {
  recipes: Recipe[];

  constructor(private recipeService: Recipeservice) {}

 onRecipeSelected(recipe: Recipe) {
    this.recipeService.RecipeSelected.emit(recipe);
    console.log(Recipe);
}

  ngOnInit() {
    this.recipes = this.recipeService.getRecipes();
  }

}

here is the recipes.service file:

import { Recipe } from './recipes.model';
import { Ingredient } from '../shared/ingredient.model';
import { Injectable } from '@angular/core';
import { EventEmitter } from '@angular/core';

@Injectable()
export class Recipeservice {

RecipeSelected = new EventEmitter<Recipe>();


    private recipes: Recipe[] = [
        new Recipe('Spaghetti Carbonara', 'Authentic Italian Carbonara', 'https://d1doqjmisr497k.cloudfront.net/-/media/schwartz/recipes/2000x1125/easy_spaghetti_carbonara_2000.jpg?vd=20180522T020207Z&hash=9B103A2DB3CDCB31DB146870A3E05F9856C051A2', [
            new Ingredient('Spaghetti', 500),
            new Ingredient('Lardons', 20),
            new Ingredient('egg', 4),
            new Ingredient('parmesan', 100),
            new Ingredient('Garlic', 1),
            new Ingredient('Olive Oil', 50)
        ]),

        new Recipe('Lasagne', 'Mums lasagne recipe', 'https://img.taste.com.au/bBe9SZ5Q/taste/2016/11/cheesy-beef-and-spinach-lasagne-45846-1.jpeg', [
            new Ingredient('Spaghetti', 500),
            new Ingredient('Lardons', 20),
            new Ingredient('egg', 4),
            new Ingredient('parmesan', 100),
            new Ingredient('Garlic', 1),
            new Ingredient('Olive Oil', 50)
        ])
    ];



        getRecipes() {
            return this.recipes.slice();
        }

}

This is the recipe-view.ts file (where I subscribe to the event):

import { Component, OnInit } from '@angular/core';
import { Recipeservice } from '../recipes/recipes.service'
import { Recipe } from '../recipes/recipes.model';

@Component({
  selector: 'app-recipe-view',
  templateUrl: './recipe-view.component.html',
  styleUrls: ['./recipe-view.component.css'],
  providers: [Recipeservice]
})
export class RecipeViewComponent implements OnInit {
  selectedRecipe: Recipe;

  constructor(private recipeService: Recipeservice) { }

  ngOnInit() {
    this.recipeService.RecipeSelected.subscribe(
      (recipe: Recipe) => {
        this.selectedRecipe = recipe;
console.log(this.selectedRecipe);
      }
    );
  }

}

And lastly the recipe-view.html file:

<div class="recipe-full-view">
    <h4 class="list-group-item-heading">{{ selectedRecipe.name }}</h4>
    <p class="list-group-item-text">{{ selectedRecipe.description }}</p>
</div>
<ul class="Ingredients-list">
    <li class="Ingredients-list-item"
    *ngFor="let Ingredient of selectedRecipe.ingredients">
    {{ Ingredient.name }} - {{ Ingredient.amount }}
</li>
</ul>

Any help you can give me would be greatly appreciated as I am feeling a little lost right now! P.s the 'new Recipe' comes from a model file which I haven't included as I didn't feel it was relevant.

Answer 1

In your recipes.html, you should call a method called onRecipeSelected():

<div *ngFor="let recipe of recipes" class="list-item">
    <a href="#" ... (click)="onRecipeSelected(recipe)">
    ...

in 'recipes.ts', call the RecipeService method to select a recipe:

export class RecipesComponent implements OnInit {
  ...

  onRecipeSelected(recipe: Recipe) {
    this.recipeService.selectRecipe(recipe);
  }
}

I suggest you some improvments in your code, especially in RecipeService, by using BehaviorSubject in place of EventEmitter :

@Injectable()
export class RecipeService {
  private recipes = [....];

  selectedRecipe$ = new BehaviorSubject<Recipe>(null);
  recipes$ = new BehaviorSubject<Recipe[]>(this.recipes);

  selectRecipe(recipe: Recipe) {
    this.selectedRecipes.next(recipe);
  }
}

So your RecipeViewComponent code could be changed to :

export class RecipeViewComponent implements OnInit {
  selectedRecipe$: Observable<Recipe>;

  constructor(private recipeService: RecipeService) { }

  ngOnInit() {
    this.selectedRecipe$ = this.recipeService.selectedRecipe$;
  }
}

I made a simplified Stackblitz demo for your use case. It demonstrates use of Observable and BehaviorSubject.