File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
app-inner-product |
| styleUrls |
inner-product.component.scss |
| templateUrl |
./inner-product.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
noImageUrl
|
noImageUrl: string
|
Type : string
|
Default value : 'assets/default/no-image-available.jpg'
|
|
|
import { environment } from './../../../../../environments/environment';
import { Product } from './../../../../core/models/product';
import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges } from '@angular/core';
@Component({
selector: 'app-inner-product',
templateUrl: './inner-product.component.html',
styleUrls: ['./inner-product.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class InnerIproductComponent implements OnInit {
@Input() product: Product;
@Input() showRating: boolean;
noImageUrl = 'assets/default/no-image-available.jpg'
constructor() {
}
ngOnInit() {
}
get imageUrl() {
return this.product.images[0] ? this.product.images[0].product_url : this.noImageUrl
}
}
<div class="product-tile">
<a [routerLink]="['/', product.slug]">
<img width="150" height="200" class="mb-1" [src]="imageUrl" >
<ngx-input-star-rating *ngIf="showRating" value="{{product.rating_summary.average_rating}}" class="rating" disabled="true"></ngx-input-star-rating>
<p class="mt-1 mb-2 text-dark"> {{ product.name }} </p>
</a>
</div>
Legend
Html element with directive