Hands-On Full-Stack Web Development with ASP.NET Core

Implementing a routed page

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', ...