Angular onclick toggle bookmark icon styles for current element

Question

am trying toggle bookmark icon color for current element onclick but it's getting applied to all the bookmark icons

<div *ngFor="let product of products">
    <mat-card class="col-md-3">
        <img style="height:100%; width: 100%;" src="{{ product.imageUrl }}" />
        <div class="card-body">
            <mat-card-title>{{product.name}}</mat-card-title>
            <mat-card-content>
                <p>{{product.description}}</p>
            </mat-card-content>
            <mat-card-subtitle>&#8377; {{product.price}}</mat-card-subtitle>
            <mat-card-actions>
                <button mat-flat-button color="primary" style="margin-right: 7px;"> Add to Bag </button>
                <button mat-icon-button aria-label="Example icon-button with a heart icon"
                    (click)="clickEvent($event)" style="float: right;">
                    <mat-icon [ngClass]="status ? 'bookmark' : 'bookmarked'">favorite</mat-icon>
                </button>
            </mat-card-actions>
        </div>
    </mat-card>
</div>

TS

status: boolean = false;
private clickEvent() {
    this.status = !this.status;
}

thanks

[ngClass]="[status ? 'bookmark' : 'bookmarked']" – enno.void Jan 24 '20 at 09:43 — enno.void, Jan 24 '20 at 09:43
Are you using `ngFor` ? Please post the full code – Sameer Jan 24 '20 at 09:46 — Sameer, Jan 24 '20 at 09:46

score 3 · Accepted Answer · answered Jan 24 '20 at 09:54

3

Thats because you used a single variable for every item. Create a status key for each item in products array (Example shown below)

<button mat-icon-button (click)="product.status = !product.status" style="float: right;">
  <mat-icon [ngClass]="product.status ? 'bookmark' : 'bookmarked'">favorite</mat-icon>
</button>

answered Jan 24 '20 at 09:54

Sameer

4,758
3
20
41

`0+1` it's easy than my answer . – Ramesh Rajendran Jan 24 '20 at 10:00
1

@babuharry if you want you can create that `status` property as false by default or it doesn't matter because it is undefined (which also means false), Mark this answer as **Accepted** if it helps or works for you :) – Sameer Jan 24 '20 at 10:03
@RameshRajendran thank you for your time but code showing error "cannot read property of status undefined". – Bobby Jan 24 '20 at 10:04
if `this.products` data type is `any` then my code should works. – Ramesh Rajendran Jan 24 '20 at 10:05

Ramesh Rajendran · Answer 2 · 2020-01-24T09:54:09.727

Try this way

private clickEvent(event, index) {
    this.products[index].status = ! this.products[index].status;
}

<div *ngFor="let product of products;let i = index">
        <mat-card class="col-md-3">
            <img style="height:100%; width: 100%;" src="{{ product.imageUrl }}" />
            <div class="card-body">
                <mat-card-title>{{product.name}}</mat-card-title>
                <mat-card-content>
                    <p>{{product.description}}</p>
                </mat-card-content>
                <mat-card-subtitle>&#8377; {{product.price}}</mat-card-subtitle>
                <mat-card-actions>
                    <button mat-flat-button color="primary" style="margin-right: 7px;"> Add to Bag </button>
                    <button mat-icon-button aria-label="Example icon-button with a heart icon"
                        (click)="clickEvent($event,index)" style="float: right;">
                        <mat-icon [ngClass]="status ? 'bookmark' : 'bookmarked'" instead of
                            [ngClass]="status ? 'bookmark' : 'bookmarked'">favorite</mat-icon>
                    </button>
                </mat-card-actions>
            </div>
        </mat-card>

it's getting applied to all bookmark icons i need color for current icon — Bobby, Jan 24 '20 at 09:53

score 0 · Answer 3 · answered Jan 24 '20 at 10:22

0

You can achieved this using conditional classes

first create your own class and then

[class.yourclass]="condition"

for more ref Angular: conditional class with *ngClass

answered Jan 24 '20 at 10:22

ketan vaidya

49
3

Angular onclick toggle bookmark icon styles for current element

3 Answers3