Having the routes setup in place, implement the product details page component by following these steps:
- Generate
ProductDetailsComponentwith the following command:
ng generate component modules/market/product-details- Replace its HTML file content with the following:
<div>
<img [src]="primaryImageSrc" />
<h3>{{product.title}}</h3>
<span>{{product.description}}</span>
</div>- Replace its CSS file content with the following:
img {
max-width: 80px;
max-height: 80px;
}- Set the class to receive a product as input with a
primaryImageSrcgetter:
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...