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

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" <!-- Addthisclass, and customize its look -->
     (click)="addItemToArray(item)">
  <imgsrc="{{item.image}}"class="img-fluid"/><spanclass="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! :)

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"><imgsrc="{{item.image}}"class="img-fluid"/><spanclass="d-block">{{item.name}}</span></div>

Share