CODEWITHSUNDEEP
angulartypescript
Nikhila K
Nikhila K

Reputation: 29

Only show specific button onclick, remaining should be the same

When I click on confirm button the specific button need to be changed to request sent.

But remaining should be as JOIN RIDE button but it is getting disabled. Can any one help me with this?

Please check the link.

Upvotes: 1

Views: 108

Answers (1)

FAISAL
FAISAL

Reputation: 34673

The problem is that you are using the same variable to hide the confirmation panel for all the items. To correct this, you can do the following:

You can create a class to store the ride requests:

export class RideRequest{
  constructor(city:string){
    this.city = city;
  }
  city: string;
  requestSent:boolean;
  requestConfirmed:boolean;
  joinRequested:boolean;
}

Modify you App class to the following:

export class App {

  rideRequests:RideRequest;

  constructor() { 
      this.rideRequests = [{'city':'Hyderabad'},
                           {'city':'Banglore'},
                           {'city':'New Delhi'},
                           {'city':'Mumbai'},
                           {'city':'Gujrat'},
                           {'city':'Pune'}];
   }

  joinRequested(ride:RideRequest) {
    ride.joinRequested = true;
    console.log(ride);
  }
  confirmRide(ride:RideRequest) {
    ride.requestConfirmed = true;
    console.log(ride);
  }
  cancelRide(ride:RideRequest) {
    ride.joinRequested = false;
    ride.requestConfirmed = false;
    console.log(ride);
  }
}

Then, modify your component template to the following:

<div>
  <div class="conform">
    Select one city:

    <div class="details" *ngFor="let ride of rideRequests;let i = index">
      <hr />
      <p>{{ride.city}}</p>
       <div *ngIf="!ride.joinRequested && !ride.requestConfirmed">
        <button (click)="joinRequested(ride)" class="joinRide">JOIN RIDE</button>
      </div>
      <div  class="dialogBoxStyle" *ngIf="ride.joinRequested && !ride.requestConfirmed">
        <p>Your Pickup Time: 8:30AM </p>
        <p>
          <button (click)="cancelRide(ride)">Cancel</button>
          <button (click)="confirmRide(ride)">Confirm</button>
        </p>
      </div>
      <div *ngIf="ride.requestConfirmed">
        <button class="joinRide reqSents" (click)="Requestclick(ride)">
           Request Sent
        </button>
      </div>
    </div>
  </div>
</div>

Here is a link to the working plunker: https://plnkr.co/edit/hYF0BuFeRo07Vr4nn2u4?p=preview

Upvotes: 1

Related Questions