SPA part 2

Author: SujeshShakya

src/app/app-routing/routes.ts

@@ -19,6 +19,10 @@ export const routes: Routes = [
         path: 'about',
         component: AboutComponent
     },
+    {
+        path: 'dishdetail/:id',
+        component: DishDetailComponent
+    },
     {
         path: 'contactus',
         component: ContactComponent

src/app/dish-detail/dish-detail.component.html

@@ -44,6 +44,8 @@ <h3>{{dish.name | uppercase}}</h3>
 
     </mat-list>
   </div>
+  <mat-card-actions>
+    <button mat-button (click)="goBack()">BACK</button>
 
 
 

src/app/dish-detail/dish-detail.component.ts

@@ -1,5 +1,8 @@
 import { Component, Input, OnInit } from '@angular/core';
 import {Dish} from '../shared/dish';
+import {ActivatedRoute, Params} from '@angular/router';
+import {Location} from '@angular/common';
+import {DishService} from '../services/dish.service';
 
 @Component({
   selector: 'app-dish-detail',
@@ -8,12 +11,18 @@ import {Dish} from '../shared/dish';
 })
 export class DishDetailComponent implements OnInit {
 
- @Input()
   dish: Dish;
 
-  constructor() { }
+  constructor(private route: ActivatedRoute, private location: Location,
+    private dishService: DishService) { }
 
   ngOnInit() {
+    let id = this.route.snapshot.params['id'];
+    this.dish = this.dishService.getDish(id);
+  }
+
+  goBack (): void {
+    this.location.back();
   }
 
 }

src/app/footer/footer.component.html

@@ -9,10 +9,10 @@
       <div fxFlex="40" fxFlexOffset="20px">
         <h4>Links</h4>
         <mat-list>
-          <mat-list-item><a mat-button>Home</a></mat-list-item>
-          <mat-list-item><a mat-button>About</a></mat-list-item>
-          <mat-list-item><a mat-button>Menu</a></mat-list-item>
-          <mat-list-item><a mat-button>Contact</a></mat-list-item>
+          <mat-list-item><a mat-button routerLink='/home'>Home</a></mat-list-item>
+          <mat-list-item><a mat-button routerLink='/About'>About</a></mat-list-item>
+          <mat-list-item><a mat-button routerLink='/Menu'>Menu</a></mat-list-item>
+          <mat-list-item><a mat-button routerLink='/Contactus'>Contact</a></mat-list-item>
         </mat-list>
       </div>
       <div fxFlex="55">

src/app/menu/menu.component.html

@@ -11,7 +11,7 @@ <h3>Menu</h3>
 
   <div fxFlex>
     <mat-grid-list cols="2" rowHeight="200px">
-      <mat-grid-tile *ngFor="let dish of dishes" (click)="Selectdish(dish)">
+      <mat-grid-tile *ngFor="let dish of dishes" [routerLink]="['/dishdetail',dish.id]">
         <img height="200px" src={{dish.image}} alt={{dish.name}}>
         <mat-grid-tile-footer>
           <h1>{{dish.name | uppercase}}</h1>
@@ -22,4 +22,3 @@ <h1>{{dish.name | uppercase}}</h1>
 
 </div>
 
-<app-dish-detail [dish] = "selectedDish"></app-dish-detail>

src/app/menu/menu.component.ts

@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
 import {Dish} from '../shared/dish';
 import  {DishService} from '../services/dish.service';
 
-
 @Component({
   selector: 'app-menu',
   templateUrl: './menu.component.html',
@@ -22,7 +21,6 @@ selectedDish: Dish;
   }
 
   Selectdish(dish: Dish){
-    console.log(dish);
     this.selectedDish = dish;
   }