Select recipe item by routing

src/app/recipes/recipe-detail/recipe-detail.component.ts

@@ -1,22 +1,37 @@
-import { ShoppingListService } from './../../shopping-list/shopping-list.service';
-import { Component, OnInit, Input } from '@angular/core';
+import { RecipeService } from './../recipe.service';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { ActivatedRoute } from "@angular/router";
+import { Subscription } from "rxjs/Rx";
 
+import { ShoppingListService } from './../../shopping-list/shopping-list.service';
 import { Recipe } from "../recipe"
 
 @Component({
   selector: 'rb-recipe-detail',
   templateUrl: './recipe-detail.component.html'
 })
-export class RecipeDetailComponent implements OnInit {
-  @Input() selectedRecipe: Recipe;
+export class RecipeDetailComponent implements OnInit, OnDestroy {
+  private subscription: Subscription;
+  private recipeIndex: number;
+  selectedRecipe: Recipe;
 
-  constructor(private shoppingListService: ShoppingListService) { }
+  constructor(private shoppingListService: ShoppingListService, private route: ActivatedRoute, private recipeService: RecipeService) { }
 
   ngOnInit() {
+    this.subscription = this.route.params.subscribe(
+      (params: any) => {
+        this.recipeIndex = params['id'];
+        this.selectedRecipe = this.recipeService.getRecipe(this.recipeIndex);
+      }
+    );
   }
 
   onAddToShoppingList() {
     this.shoppingListService.addItems(this.selectedRecipe.ingredients);
   }
 
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
 }

src/app/recipes/recipe-list/recipe-item.component.html

@@ -1,4 +1,4 @@
-<a href="#" class="list-group-item clearfix">
+<a [routerLink]="[recipeId]" class="list-group-item clearfix">
   <div class="pull-left">
     <h4 class="list-group-item-heading">{{recipe.name}}</h4>
     <p class="list-group-item-text">{{recipe.description}}</p>

src/app/recipes/recipe-list/recipe-item.component.ts

@@ -1,18 +1,12 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 import { Recipe } from '../recipe'
 
 @Component({
   selector: 'rb-recipe-item',
   templateUrl: './recipe-item.component.html'
 })
-export class RecipeItemComponent implements OnInit {
+export class RecipeItemComponent {
   @Input() recipe: Recipe;
-  recipeId: number;
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
+  @Input() recipeId: number;
 }

src/app/recipes/recipe-list/recipe-list.component.html

@@ -1,12 +1,12 @@
 <div class="row">
     <div class="col-xs-12">
-        <a class="btn btn-success">New Recipe</a>
+        <a class="btn btn-success" [routerLink]="['new']">New Recipe</a>
     </div>
 </div>
 <div class="row">
     <div class="col-xs-12">
         <ul class="list-group">
-            <rb-recipe-item *ngFor="let recipe of recipes" [recipe]="recipe" (click)="onSelected(recipe)"></rb-recipe-item>
+            <rb-recipe-item *ngFor="let recipe of recipes; let i = index" [recipe]="recipe" [recipeId]="i"></rb-recipe-item>
         </ul>
     </div>
 </div>

src/app/recipes/recipe.service.ts

@@ -16,4 +16,8 @@ export class RecipeService {
     return this.recipes;
   }
 
+  getRecipe(index: number) {
+    return this.recipes[index];
+  }
+
 }