Submodule 21.2: Single Page Applications - Practice

Open dishdetail.component.ts and delete input because, since we no longer use app-dishdetail in the template, we don't need it.

Then update it as follows:

. . .
import { DishService } from '../services/dish.service';
import { Params, ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
. . .
export class DishdetailComponent implements OnInit {
  dish: Dish;
  constructor(private dishservice: DishService,
    private route: ActivatedRoute,
    private location: Location) { }
  ngOnInit() {
    const id = +this.route.snapshot.params['id'];
    this.dish = this.dishservice.getDish(id);
 }
  goBack(): void {
    this.location.back();
  }
}

As you can see we import the { Params, ActivatedRoute } from '@angular/router';. We do that in order to use snapshot. Let's see what snapshot does:

This application won't re-use the same instance of DishdetailComponent. The user always returns to the Choco-dish MenuComponent page to select another Choco-dish to view. There's no way to navigate from one Choco-dish detail to another without visiting the menu component in between. Therefore, the router creates a new DishdetailComponent instance every time.

Navigating back to the MenuComponent

We also import the { Location } from '@angular/common';, in order to be able to hold the current id of our location and thus be able to use the goBack() method/. 

The DishdetailComponent has a "Back" button that navigates imperatively back to the MenuComponent.

Open dishdetail.component.html and update it as follows:

<a (click)="goBack()" class="card-link btn btn-primary btn-sm">BACK</a>