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>

[Jean Marc]

Hello ,
You have to add a click event on your mat-card :
(click)="actionOnclick(property)"

[Eric Weisler]

Thank you so much.  Can you be just bit more specific?

ª¿ª   Eric Weisler

www.weisler.org

er...@weisler.org

845-548-2675

--
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+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/9d88544f-0c5b-4623-b522-02f3c58b1d4e%40googlegroups.com.

[Jean Marc]

Hello,

In the .html example:
<mat-card *ngFor="let property of properties" (click)="actionOnProperty(property)"></mat-card>

In the .TS
public actionOnProperty(property: Property){
// Actions
}

On this way you will do an action only on the property selected