12-152 Handling recipe details navigation

src/app/app-routing.module.ts

@@ -3,10 +3,15 @@ import { Routes, RouterModule } from '@angular/router'
 
 import { RecipesComponent } from './recipes/recipes.component';
 import { ShoppingListComponent } from './shopping-list/shopping-list.component';
+import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
+import { RecipeStartComponent } from './recipes/recipe-start/recipe-start.component';
 
 const appRoutes: Routes = [
     { path: '', redirectTo: '/recipes', pathMatch: 'full' },
-    { path: 'recipes' , component: RecipesComponent },
+    { path: 'recipes' , component: RecipesComponent, children: [
+        { path: '', component: RecipeStartComponent },
+        { path: ':id', component: RecipeDetailComponent }
+    ] },
     { path: 'shopping-list', component: ShoppingListComponent }
 ];
 

src/app/app.module.ts

@@ -15,6 +15,7 @@ import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-ed
 import { DropdownDirective } from './shared/dropdown.directive';
 import { ShoppingListService } from './shopping-list/shopping-list.service';
 import { AppRoutingModule } from './app-routing.module';
+import { RecipeStartComponent } from './recipes/recipe-start/recipe-start.component';
 
 
 @NgModule({
@@ -27,7 +28,8 @@ import { AppRoutingModule } from './app-routing.module';
     RecipeItemComponent,
     ShoppingListComponent,
     ShoppingEditComponent,
-    DropdownDirective
+    DropdownDirective,
+    RecipeStartComponent
   ],
   imports: [
     BrowserModule,

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

@@ -1,6 +1,7 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Recipe } from '../recipe.model';
 import { RecipeService } from '../recipe.service';
+import { ActivatedRoute, Params } from '@angular/router';
 
 @Component({
   selector: 'app-recipe-detail',
@@ -8,11 +9,19 @@ import { RecipeService } from '../recipe.service';
   styleUrls: ['./recipe-detail.component.css']
 })
 export class RecipeDetailComponent implements OnInit {
-  @Input() recipe: Recipe;
+  recipe: Recipe;
+  id: number;
   
-  constructor(private recipeService: RecipeService) { }
+  constructor(private recipeService: RecipeService,
+    private route: ActivatedRoute) { }
 
   ngOnInit() {
+    this.route.params.subscribe(
+      (params: Params) => {
+        this.id = +params['id'];
+        this.recipe = this.recipeService.getRecipe(this.id);
+      }
+    );
   }
 
   onAddToShoppingList() {

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

@@ -1,7 +1,8 @@
 <a 
     style="cursor: pointer;"
-    class="list-group-item clearfix"
-    (click)="onSelected()">
+    [routerLink]="[index]"
+    routerLinkActive="active"
+    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/recipe-item.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Recipe } from '../../recipe.model';
-import { RecipeService } from '../../recipe.service';
 
 @Component({
   selector: 'app-recipe-item',
@@ -9,14 +8,8 @@ import { RecipeService } from '../../recipe.service';
 })
 export class RecipeItemComponent implements OnInit {
   @Input() recipe: Recipe;
-  
-  constructor(private recipeService: RecipeService) { }
+  @Input() index: number;
 
   ngOnInit() {
   }
-
-  onSelected() {
-    this.recipeService.recipeSelected.emit(this.recipe);
-  }
-
 }

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

@@ -7,8 +7,8 @@
 <div class="row">
   <div class="col-xs-12">
     <app-recipe-item
-      *ngFor="let recipeElement of recipes"
+      *ngFor="let recipeElement of recipes; let i = index"
       [recipe]="recipeElement"
-      (recipeSelected)="onRecipeSelected(recipeElement)"></app-recipe-item>
+      [index]="i"></app-recipe-item>
   </div>
 </div>

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

@@ -0,0 +1 @@
+<h3>Please select a recipe!</h3>

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-recipe-start',
+  templateUrl: './recipe-start.component.html',
+  styleUrls: ['./recipe-start.component.css']
+})
+export class RecipeStartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/recipes/recipe.service.ts

@@ -34,6 +34,10 @@ export class RecipeService {
         return this.recipes.slice();
     }
 
+    getRecipe(index: number) {
+        return this.recipes[index];
+    }
+
     addIngredientsToShoppingList(ingredients: Ingredient[]) {
         this.shoppingListService.addIngredients(ingredients);
     }

src/app/recipes/recipes.component.html

@@ -3,11 +3,6 @@
     <app-recipe-list></app-recipe-list>
   </div>
   <div class="col-md-7">
-    <app-recipe-detail
-      *ngIf="selectedRecipe; else infoText"
-      [recipe]="selectedRecipe"></app-recipe-detail>
-      <ng-template #infoText>
-        <p>Please select a Recipe!</p>
-      </ng-template>
+    <router-outlet></router-outlet>
   </div>
 </div>