@Lyhout wrote:
Hello, I got a problem when I want to disabled button.
I want to disable only one button when I clicked on that. but it still disabled all buttons.
Can u give me some solution?
Thank in advance.<ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-back-button></ion-back-button> </ion-buttons> <ion-title> <p *ngFor="let pro of product_detail">{{pro.pro_name}}</p> </ion-title> <ion-buttons *ngIf="isAuthenticated()" slot="end"> <ion-button (click)="openCart()"> <ion-badge *ngIf="cart.length > 0">{{ cart.length }}</ion-badge> <ion-icon slot="icon-only" style="color: #ffffff;" name="cart"></ion-icon> </ion-button> </ion-buttons> <ion-buttons *ngIf="!isAuthenticated()" slot="end"> <ion-button (click)="openCart()"> <ion-badge *ngIf="cart.length > 0">{{ cart.length }}</ion-badge> <ion-icon slot="icon-only" style="color: #ffffff ;" name="cart"></ion-icon> </ion-button> </ion-buttons> </ion-toolbar> </ion-header> <ion-content> <ion-grid> <ion-row class="ion-align-items-center"> <ion-col size=12 size-xs=12 size-sm=12 size-md=12 size-lg=12> <ion-card *ngFor="let pro of product_detail"> <ion-img src="https://www.mfitpro.com/image/image_product/{{pro.pic}}"></ion-img> <ion-card-header style="text-align: center;"> <ion-card-title >{{pro.pro_name}}</ion-card-title> </ion-card-header> <ion-card-content style="text-align: center;"> <p>{{pro.name}}</p> </ion-card-content> </ion-card> <!-- start second card --> <ion-card *ngFor="let pro_option of product_detail_option"> <ion-card-header> <ion-card-header class="title-option">CHOOSE YOUR OPTIONS</ion-card-header> </ion-card-header> <ion-card-content class="option-heigt"> <ion-row> <ion-col size="6"> <ion-img src="https://www.mfitpro.com/image/image_sub_product/{{pro_option.image}}"></ion-img> </ion-col> <ion-col size="6"> <!-- <p style="font-size: 16px; padding: 5px;">Size</p> --> <p style="font-size: 18px; border: 1px solid gray;padding:7px; text-align: center; border-radius: 5px;">{{pro_option.sub_name}}</p> <ion-row style="padding-top: 32px;"> <ion-col size="4"> <p style="font-size: 16px;padding-top: 14px;text-align: center;">Price:</p> </ion-col> <ion-col size="8"> <p style="font-size: 24px; text-align: center; color: blue; font-weight: bold" > ${{pro_option.price}}</p> </ion-col> </ion-row> </ion-col> </ion-row> </ion-card-content> <ion-card-header class="flaour-header"> <ion-row> <ion-col size="8"> <p><b>Flavor/Option</b></p> </ion-col> <ion-col size="4"> </ion-col> </ion-row> </ion-card-header> <ion-card-content style="padding:0px;" *ngFor="let pro_no_group of product_detail_option_no_group"> <ion-row style="padding-right: 20px;padding-left: 20px; border-bottom: 1px solid #bbb1b3" *ngIf="pro_no_group.sub_name == pro_option.sub_name;"> <ion-col size="8"> <ion-row> <ion-col size=12 class="col-height"> <p> {{pro_no_group.opt_name}} </p> </ion-col> <ion-col size=12 class="col-height"> <p>Expires : {{pro_no_group.ex_date}}</p> </ion-col> </ion-row> </ion-col> <ion-col size="4" *ngIf="pro_no_group.available_qty != 0 && disableButton == false "> <ion-button expand="block" size="medium" class="addtocart" (click)="addToCart(pro_no_group)" color="success"> <p>Add To Cart</p> </ion-button> </ion-col> <ion-col size="4" *ngIf="pro_no_group.available_qty != 0 && disableButton == true " (click)="clicked()" > <ion-button expand="block" size="medium" [disabled]="disableButton" class="addtocart" color="primary"> <p>Added To Cart</p> </ion-button> </ion-col> <ion-col size="4" *ngIf="pro_no_group.available_qty == 0" (click)="outOfStock()" > <ion-button expand="block" size="medium" class="outofstock" color="danger"> <p> Out of Stock </p> </ion-button> </ion-col> </ion-row> </ion-card-content> </ion-card> <ion-card *ngFor="let prodetail of product_detail"> <ion-card-content> <div class="text-description" [innerHTML]="prodetail.description"></div> </ion-card-content> </ion-card> <!-- end sencond card --> </ion-col> </ion-row> </ion-grid> </ion-content>
disableButton = false;
addToCart(pro_no_group) {
this.cartService.addProduct(pro_no_group);
this.presentAlertConfirm();
this.disableButton = true;
}
Posts: 1
Participants: 1