product-gallery.component.html

<div class="gallery-container">

  <div class="product-gallery__featured">
    <owl-carousel-o [options]="{items: 1, dots:false, margin:8, autoWidth: autoWidth}" #owlCar>
      <ng-container *ngFor="let image of productImages">
        <ng-template carouselSlide [id]="image.url" [width]="imageSize">
          <img [src]="image.url">
        </ng-template>
      </ng-container>
    </owl-carousel-o>
  </div>

  <div class="product-gallery__carousel">
    <owl-carousel-o [options]="{items:3, dots:false, margin:5, autoWidth: true}">
      <ng-container *ngFor="let image of productImages; let i = index">
        <ng-template carouselSlide [id]="image.url+i"  [width]="80">
          <a (click)="owlCar.to(image.url); changeimage(image.url+i)">
            <img [src]="image.url"
                 [ngClass]="{'product-gallery__carousel-item--active':selectedImage === image.url+i || (i == 0 && !selectedImage)}">
          </a>
        </ng-template>
      </ng-container>
    </owl-carousel-o>
  </div>
</div>