File

src/app/product/components/product-detail-page/product-images/product-images.component.ts

Implements

OnInit

Metadata

selector app-image-container
styleUrls product-images.component.scss
templateUrl ./product-images.component.html

Inputs

images

Type: Image[]

selectedImage

Type: Image

Constructor

constructor()

Methods

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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""