src/app/home/content/product-list/product-list-item/product-list-item.component.ts
selector | app-product-list-item |
styleUrls | product-list-item.component.scss |
templateUrl | ./product-list-item.component.html |
product
|
Type: |
constructor()
|
ngOnInit |
ngOnInit()
|
Returns:
void
|
getProductImageUrl |
getProductImageUrl(url: any)
|
Returns:
void
|
import { environment } from './../../../../../environments/environment';
import { Product } from './../../../../core/models/product';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-product-list-item',
templateUrl: './product-list-item.component.html',
styleUrls: ['./product-list-item.component.scss']
})
export class ProductListItemComponent implements OnInit {
@Input() product: Product;
constructor() { }
ngOnInit() {
}
getProductImageUrl(url) {
return environment.API_ENDPOINT + url;
}
}
<div class="product-tile">
<p> Product id: {{ product.id }} </p>
<p> Product Name : {{ product.name }} </p>
<p> Product Price : {{ product.price }} </p>
<img [src]="getProductImageUrl(product.master.images[0]?.product_url)">
</div>