Change Specific Button Text on Click Inside Ngfor

Change button in ngFor list to text field to take value and then submit for processing

You can do it in this way (trimmed the code for clearity)

<div *ngFor="let prod of prodDetails$ | async; let i = index" [@fadeInOut]>
      <div class="card h-100">
          <a routerLink="{{prod.productWebFriendlyName}}"></a>
              <div class="card-body">
                      <!-- click this button to display the div below and hide this button-->
                      <button *ngIf="!productAdded[i]" type="button" (click)="addToCart(prod, i)" class="btn btn-primary float-right small">Add to Cart</button> 
                      <!-- This is hidden until the Add to Cart is clicked -->
                      <div *ngIf="productAdded[i]" id="numberSpinnnerHere" style="display:none">NUMBER SPINNER HERE <button id="FinalAddToCartWithQuantity(prod, quantity)">Add</button></div></p>
                </div>
            </div>
        </div>

Then in your component

productAdded = new Array(prodDetails.length)

addToCart(prod, index) {
     productAdded[index] = true
}

Change color of the clicked button with ngClass, on buttons generated with ngFor

Consider utilizing ngForOf index exported variable to assign a predefined variable the last clicked button index, next use ngClass to conditionally apply btn-success to the element depending on whether its id equals to lastClicked as demonstrated below:

Component:

lastClicked: number;

Template:

<tr *ngFor="let plans of PlanList; let index" (click)="lastClicked = index" [ngClass]="{'btn-success': index == lastClicked}" >
  <td class="text-primary">{{plans.typename}} </td>
  <td><a (click)="criticalSelect(...)" class="btn btn-primary text-white">${{plans.plan1}}</a></td>
  <td><a (click)="criticalSelect(...)" class="btn btn-primary text-white">${{plans.plan2}}</a></td>
  <td><a (click)="criticalSelect(...)" class="btn btn-primary text-white">${{plans.plan3}}</a></td>
  <td><a (click)="criticalSelect(...)" class="btn btn-primary text-white">${{plans.plan4}}</a></td>
</tr>

How do I change the style of a single button inside a *ngFor in Ionic 3?

All your buttons look up for same condition. You need to unify that condition to be true for only one button. You can use index value for that :

<ion-col *ngFor="let item of displayRestaurant[0].seatTimeSlotAndDiscount | slice:indexStart:indexEnd; let i=index" no-padding>
  <button ion-button style="border-radius:100px;height:70px;width:70px;text-align:center;" 
      (click)="clickedDiscount(item,i)"  
      [ngClass]="clickedIndex ===  i ? 'discountClicked' : 'discountUnclicked'">
    <p style="font-size: 10px; color:white;">{{item.percentageDiscount}}</p>
    <p style="font-size:10px;color:white;">{{item.timeOfDiscount}}</p>
  </button>
</ion-col>

Then in your component

clickedDiscount(discount:Discount,index:number){
  this.clickedIndex = index;
}

How to add an element between items within ngFor

Insert your text into the repeater if it is not the last button:

<div *ngFor="let button of buttons; let last=last">
  <p>
    <button
      type="button"
      mat-raised-button
      color="primary"
    >
      {{ button.text }}
    </button>
  </p>
  <div *ngIf="!last">
    Text
  </div>
</div>

Change array from button inside *ngFor

An other approach:

HTML:

 <li *ngFor="let link of links; let i = index">
      <button (click)="setNumber(i)">{{ link.name }}</button>
 </li>

Typescript:

...
number;
....
constructor(){
    this.number=this.number1
}

...
setNumber(index){
  console.log(index)
  switch(index){
    case 0:
      this.number = this.number1;
      break;
    case 1:
      this.number = this.number2;
      break;
    case 2:
      this.number = this.number3
  }
}

DEMO

Related Topics