Having the routes setup in place, implement the product details page component by following these steps:

1. Generate ProductDetailsComponent with the following command:

ng generate component modules/market/product-details

2. Replace its HTML file content with the following:

<div>
  <img [src]="primaryImageSrc" />
  <h3>{{product.title}}</h3>
  <span>{{product.description}}</span>
</div>

3. Replace its CSS file content with the following:

img {
  max-width: 80px;
  max-height: 80px;
}

4. Set the class to receive a product as input with a primaryImageSrc getter:

import { Component, Input } from '@angular/core';
import { Product } from '../../../model';
 
@Component({
  selector: 'app-product-details',
  templateUrl: './product-details.component.html',
  styleUrls: ['./product-details.component.css']
})
export class ProductDetailsComponent {
  @Input() product: Product;
 
  get primaryImageSrc() {
    return this.product && this.product.media && this.product.media.length > 0
      ? this.product.media[0].url
      : null;
  }
}

5. Implement product retrieval in ProductsService as follows:

…
 export class ProductsService {
   …
   loadProduct(id: number) {
     return this.http
       .get(`${this.apiUri}products/${id}`)
       .toPromise()
       .then(result => result as Product);
   }
 }

6. Load the product according to the specified route parameter in ProductViewPageComponent:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ProductsService } from '../../core/services/products.service';
import { Product } from '../../../model';
 
@Component({
  selector: 'app-product-view-page',
  templateUrl: './product-view-page.component.html',
  styleUrls: ['./product-view-page.component.css']
})
export class ProductViewPageComponent implements OnInit {
  product: Product;
  isBusy = false;
 
  constructor(
    private readonly route: ActivatedRoute,
    private readonly productsService: ProductsService,
    ) { }
 
  ngOnInit() {
    // should generally use the observer and subscribe.
    const productId = +this.route.snapshot.paramMap.get('id');
 
    this.isBusy = true;
    try {
      this.productsService.loadProduct(productId)
        .then(p => this.product = p);
    } finally {
      this.isBusy = false;
    }
  }
}

As you can see, Angular Router includes a service named ActivatedRoute. It is a useful service when implementing routed components as it enables responding to route parameters, navigating in code, and more.

7. Replace the ProductViewPageComponent HTML file's content with the following:

<div *ngIf="product">
  <app-product-details [product]="product"></app-product-details>
  <button routerLink="/products">Back</button>
</div>
<app-busy *ngIf="isBusy"></app-busy>

Here, you see the use of routerLink, which is another directive that comes with  Angular Router. It is used to perform navigation as specified directly in the templates. You set it with the desired path to which to navigate. It supports both a  path and an array of segments, which we will use in an upcoming section.

8. Edit the template of ProductCardComponent so that it navigates to the product page:

<div class="item-card">
  <div class="item-card-content-container"
       [routerLink]="['/products', product.productId]">
    <img class="item-card-content-container-img" [src]="primaryImageSrc" />
    <span class="item-card-content-container-title">{{product.title}}</span>
    <span class="item-card-content-container-text">{{product.description}}</span>
  </div>
</div>

Next, follow these steps to implement the navigation from ProductsPageComponent to ProductsEditPageComponent:

1. Generate a new button component as part of SharedModule with the following command:

ng generate component modules/shared/plus-button

2. Replace the HTML file /src/app/modules/shared/plus-button/plus-button.component.html contents with the following:

<a class="round-button">+</a>

3. Replace the CSS file /src/app/modules/shared/plus-button/plus-button.component.css contents with the following:

.round-button {
  display:block;
  width:50px;
  height:50px;
  line-height:47px;
  border: 2px solid #f5f5f5;
  border-radius: 50%;
  color:#f5f5f5;
  text-align:center;
  text-decoration:none;
  background: #464646;
  box-shadow: 0 0 3px gray;
  font-size:20px;
  font-weight:bold;
  cursor: pointer;
}
 
.round-button:hover {
  background: #262626;
}

4. Export PlusButtonComponent in SharedModule:

…
@NgModule({
  …
  exports: [
    …
    PlusButtonComponent,
  ],
})
export class SharedModule { }

5. Use the new component in the ProductsPageComponent template, position it in the bottom-right corner, and set up the navigation using routerLink:

<app-category-menu
  [categories]="categories"
  (categoryChanged)="onCategoryChanged($event)"
   ></app-category-menu>
 
<app-product-list [products]="products"></app-product-list>
 
<div class="plus-container" routerLink="/products/new">
  <app-plus-button></app-plus-button>
</div>
 
<app-busy *ngIf="isBusy"></app-busy>

6. Replace the CSS file /src/app/modules/market/products-page/products-page.component.css contents with the following:

.plus-container {
  position: fixed;
  right: 50px; bottom: 50px;
}

Congratulations! You have just completed implementing the product view page and wiring up the navigation, so go ahead and give it a try yourself—the product view page should look similar to this: