Stopping A Click Event On A Div If A Condition Is Met -- Angular 5

Question

I have a loop that generates let's say 20 divs. Each div is an object from my local objects array. Here's the code:

Copy

Solution 2:

For that, you can add a class for each items which are added in the cart as below:

<div *ngFor="let item of userInventory"
     class="col-2 c-pointer"
     [class.disabled]="item.isAdded" <!-- Add this class, and customize its look -->
     (click)="addItemToArray(item)">
  <img src="{{item.image}}" class="img-fluid"/>
  <span class="d-block">{{item.name}}</span>
</div>

Then, in your .ts component file, add this condition:

addItemToArray(item) {
    if (!item.isAdded) {
        this.itemsToSend.push(item);
        item.isAdded = true;
    } else {
        // add some error flash message
    }
}

Hope it helps! :)

Baca Juga

Solution 3:

You can simply use disabled property to achieve this:

<div *ngFor="let item of userInventory"
           class="col-2 c-pointer"
           (click)="addItemToArray(item)"
           [attr.disabled]="item.isAdded">
        <img src="{{item.image}}" class="img-fluid"/>
        <span class="d-block">{{item.name}}</span>
</div>

Html5 Guru

Stopping A Click Event On A Div If A Condition Is Met -- Angular 5

Solution 2:

Solution 3:

Post a Comment for "Stopping A Click Event On A Div If A Condition Is Met -- Angular 5"