src/app/product/components/product-detail-page/product-images/product-images.component.ts
selector | app-image-container |
styleUrls | product-images.component.scss |
templateUrl | ./product-images.component.html |
images
|
Type: |
selectedImage
|
Type: |
constructor()
|
ngOnInit |
ngOnInit()
|
Returns:
void
|
getProductImageUrl |
getProductImageUrl(url: any)
|
Returns:
void
|
onMouseOver |
onMouseOver(image: Image)
|
Returns:
void
|
import { Image } from './../../../../core/models/image';
import { environment } from './../../../../../environments/environment';
import { Product } from './../../../../core/models/product';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-image-container',
templateUrl: './product-images.component.html',
styleUrls: ['./product-images.component.scss']
})
export class ProductImagesComponent implements OnInit {
@Input() images: Image[] = null;
@Input() selectedImage: Image = null;
constructor() { }
ngOnInit() { }
getProductImageUrl(url) {
return environment.API_ENDPOINT + url;
}
onMouseOver(image: Image) {
this.selectedImage = image;
}
}
<div class="image-container" *ngIf="images">
<div class="thumbnails-vertical-container">
<button class="thumbnails-thumbnail-button" *ngFor="let image of images">
<img class="thumbnails-thumbnail"
[src]="getProductImageUrl(image.small_url)"
[alt]="image.alt"
(mouseover)="onMouseOver(image)">
</button>
</div>
<img [src]="getProductImageUrl(selectedImage.large_url)"
[alt]="selectedImage.alt"
class="thumbnails-selected-image" />
</div>