Quantcast
Channel: Ionic Forum - Latest topics
Viewing all articles
Browse latest Browse all 70752

Disabled Button

$
0
0

@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

Read full topic


Viewing all articles
Browse latest Browse all 70752

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>