[AngularJS] Angular 8 (click) event on an individual element in a loop

[Eric Weisler]

I am creating about 20 cards in a loop.  I want to have an event happen 
only yo the specific element that is clicked.  The event is a simple 
show/hide an image within that card.

<div class="property-cards-div">
  <mat-card *ngFor="let property of PropertyCards; let i=index;">
    <div class="property-image">
      <img src="../../assets/{{property.imagename}}.png" width="400px" 
height="168px" />
      <div class="unselected-state" (click)="onStarClick(i)" *ngIf=
"!propertySelected">
        <img src="../../assets/unselected-star.png" width="27px" height=
"26px" />
      </div>
      <div class="selected-state" (click)="onStarClick(i)" *ngIf=
"propertySelected">
        <img src="../../assets/selected-star.png" width="27px" height="26px"
 />
      </div>
      <div class="property-address-container">
        <div class="property-address">
          {{property.address}}
        </div>
        <div class="property-city">
          {{property.city}}
        </div>
      </div>
    </div>
    <div class="property-details-top">
      <div class="property-details-top-item">
        <span class="property-label">Price</span><br />
        {{property.price}}
      </div>
      <div class="property-details-top-item">
        <span class="property-label">GBA</span><br />
        {{property.sqft}}
      </div>
      <div class="property-details-top-item">
        <span class="property-label">Year Built</span><br />
        {{property.built}}
      </div>
    </div>
    <div style="clear:both;"></div>
    <div class="property-details-bottom">
      <div class="property-details-bottom-item left">
        <span class="property-label">Type</span> {{property.type}}
      </div>
      <div class="property-details-bottom-item right">
        <span class="property-label">Transactions</span>&nbsp;<span class=
"red">{{property.transactions}}</span>
      </div>
      <div class="property-details-bottom-item left">
        <span class="property-label">Sub-Type</span> {{property.subtype}}
      </div>
      <div class="property-details-bottom-item right">
        <span class="property-label">Trans. Type</span>
 {{property.transtype}}
      </div>
      <div style="clear:both;"></div>
    </div>
  </mat-card>
</div>

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/angular/544b086d-4ccf-476c-a30e-0ba47532cbbe%40googlegroups.com.