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;
}
