CODEWITHSUNDEEP
htmlangulartypescript
Tom
Tom

Reputation: 4043

Property binding inside of property binding

I have a an array of objects:

collections = [
          {name: 'one', productOne: 'image-url', productTwo: 'image-url'},
          {name: 'two', productOne: 'image-url', productTwo: 'image-url'},
          {name: 'three', productOne: 'image-url', productTwo: 'image-url'},
          {name: 'four', productOne: 'image-url', productTwo: 'image-url'},
]

As you can see, each object contains an image url. Let's say I'm on productTwo's product page, hence I want to display productTwo's image. I additionally have an object (product), that contains the product's name, hence I know the product's name of the product page I'm on.

How do I display the correct image? You can find the issue's location by the three question marks.

I can't just use collection.productTwo, since the product page is supposed to be dynamic and should be adjusted to the current product's page.

This might sound confusing, but this approach might illustrate it a little more:

<img [src]="collection. + product.name" [alt]="collection.name" class="w-75 align-self-center">

Is this even possible?


Code:

<div class="container-fluid px-0 top-container" *ngIf="product" [style.position]="fixed && !collections ? 'fixed' : 'static'">

  <div class="container-fluid bg-test justify-content-center min-vh-100 d-flex">
    <h1 class="align-self-center">{{product.name}}</h1>
  </div>

  <div class="container-fluid justify-content-center d-flex collections" *ngIf="collections" [style.position]="fixed && collections ? 'fixed' : 'static'">
    <div class="row align-self-center justify-content-around">
      <div class="col-12 mb-5 text-center">
        <h1>ALL COLLECTIONS</h1>
      </div>
      <div class="col-3" *ngFor="let collection of collections">
        <div class="flex-row">
          <div class="col-12 text-center">
            <h4>{{collection.name}}</h4>
            <p>- {{collection.desc}} -</p>
          </div>
          <div class="col-12 d-flex justify-content-center">
            <img [src]="???" [alt]="collection.name" class="w-75 align-self-center">
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

Upvotes: 1

Views: 50

Answers (2)

Arigui Ahmed
Arigui Ahmed

Reputation: 422

Hi could you try to write this:

   <!-- For the image of productOne -->
    <img [src]="collection?.productOne" [alt]="collection.name" class="w-75 align-self-center">

   <!-- For the image of productTwo-->
    <img [src]="collection?.productTwo" [alt]="collection.name" class="w-75 align-self-center">

Do not forget the operator ?. to be safe if the value is null.

Upvotes: 1

Andrei Tătar
Andrei Tătar

Reputation: 8295

You should be able to use:

<img [src]="collection[product.name]" [alt]="collection.name" class="w-75 align-self-center">

Upvotes: 3

Related Questions