### 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[]`
Defined in src/app/product/components/product-detail-page/product-images/product-images.component.ts:12

`selectedImage` | Type: `Image`
Defined in src/app/product/components/product-detail-page/product-images/product-images.component.ts:13

### Constructor

`constructor()`
Defined in src/app/product/components/product-detail-page/product-images/product-images.component.ts:13

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/product/components/product-detail-page/product-images/product-images.component.ts:16
Returns: `void`

getProductImageUrl
`getProductImageUrl(url: any)`
Defined in src/app/product/components/product-detail-page/product-images/product-images.component.ts:18
Returns: `void`

onMouseOver
`onMouseOver(image: Image)`
Defined in src/app/product/components/product-detail-page/product-images/product-images.component.ts:22
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 ""