Get Dynamic Gallery Images

Hi @lukasz-galka, Can you please help me, I need to clarify, I’m just a bit confused as to How can we make getting Gallery Images dynamic? I find myself in a situation where I need to get the URL of images from the database.

Here’s what I got:

getGalleryImages() {
    this.galleryImages = [
      {
        small: `${product.images.AP.front}`,
        medium: `${product.images.AP.side}`,
        big: `${product.images.AP.back}`
      }
    ]
  }

But this definitely doesn’t work in the Component file, it’s not compiled because TypeScript doesn’t recognize what is AP, it returns undefined for AP except in the template.html like so {{ product.images.AP.front }} How can you help me achieve my goal of making this dynamic, either in the component file or in the template file?

BTW, here’s an example of what my Image Object from the database looks like:

"images": {
      "AP": {
        "side": "http://vendors.blankstyle.com/ap/data/Hi-Res%20Web%20Images/5066bt_sd_mg.jpg",
        "front": "http://vendors.blankstyle.com/ap/data/Hi-Res%20Web%20Images/5066bt_mg.jpg",
        "back": "http://vendors.blankstyle.com/ap/data/Hi-Res%20Web%20Images/5066bt_mg.jpg"
       }
}

Thanks in advance for your help and suggestions.

[lukasz-galka]

You have undefined in console.log because at this moment you don’t have product. Your code is like

1. make async request to server for product
2. console.log
3. response from server

It is working in html because Angular is making change detection after every http request. So Angular knows that your response is end and is refreshing html. More here https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

In html it looks like

1. make async request to server for product
2. <img src="undefined"></img>
3. response from server
4. <img src="photo.jpg"></img>

Imo your code should look

  ngOnInit(): void {
    this.getProductRoute();
    this.getGalleryOptions();
    this.galleryImages = [];
  }

  getProductRoute() {
    this.route.paramMap
      .switchMap((params: ParamMap) => 
        this.productService.getProduct(+params.get('id')))
      .subscribe(product => {
          this.product = product;
         
          this.galleryImages = [{
              small: product.images.AP.front,
              medium: product.images.AP.side,
              big: product.images.AP.back
          }]
      );
  }

So you should create galleryImages array after response from server.

[mayordwells]

Thanks, everything is fine now.