CODEWITHSUNDEEP
jsonangulartypescriptionic-framework
Vista
Vista

Reputation: 201

How do I show and hide ion-card when clicked per field?

When I clicked the one update button.

enter image description here

It shows all the ion-card of all the data/field that is aligned to it which is not I want and it also doesn't hide the card/s again.

enter image description here

So, how do I show/hide card when the specific button is clicked and also per data/field?

My data is on JSON format by the way.

Here's my page.ts code

//comment this if you gonna use api url
 private prepareDataRequest(): Observable<any> {  // <-- change return type here
  // Define the data URL
  const dataUrl = 'assets/data/data.json';
  // Prepare the request
  return this.http.get(dataUrl);
}

orders= [];
ionViewWillEnter() {
  // Load the data
  this.prepareDataRequest().subscribe( //comment this if you will use Api Url
  //this.dataService.getRemoteData().subscribe(
    data => {
      // Takes data into in single Array and print 
      this.orders = data.output.Result.OrderTracker;
    },
    err => {
      // Set the error information to display in the template
      this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
    }
  );
}

hide() {
    this.hideMe = true;
  }

Here's my page.html code

<ng-container *ngIf="!error; else errorContent">
    <p *ngFor="let order of orders">
      {{ order?.ordernumber || '-' }} - {{order?.status || '' }} - {{order?.date || '' }} - {{order?.time || '' }}
      <ion-button ion-button (click)="hide()">UPDATE</ion-button>
      <ion-card *ngIf="hideMe">
        <ion-card-header>
          <ion-card-title>UPDATE {{ order?.ordernumber || '-' }} </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-input type="text" placeholder="Enter Status"></ion-input>
          <ion-input type="date" placeholder="Enter Date"></ion-input>
        </ion-card-content>
      </ion-card>
    </p>
  </ng-container>

Upvotes: 0

Views: 1192

Answers (1)

Pankaj Sati
Pankaj Sati

Reputation: 2539

You can use the index of the array to show/ hide details of a single item.

<ng-container *ngIf="!error; else errorContent">
    <p *ngFor="let order of orders; let i=index;">
      {{ order?.ordernumber || '-' }} - {{order?.status || '' }} - {{order?.date || '' }} - {{order?.time || '' }}
      <ion-button ion-button (click)="hide(i)">UPDATE</ion-button>
      <ion-card *ngIf="currentDisplayIndex==i">
        <ion-card-header>
          <ion-card-title>UPDATE {{ order?.ordernumber || '-' }} </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-input type="text" placeholder="Enter Status"></ion-input>
          <ion-input type="date" placeholder="Enter Date"></ion-input>
        </ion-card-content>
      </ion-card>
    </p>
  </ng-container>

In .ts file, add a variable:

currentDisplayIndex:number=-1;

This will hold the index of current item to be displayed. -1 means no detail of any item should be displayed.

Next, pass the index of current item to hide() method from the template

    hide(index) {

  if(this.currentDisplayIndex==index)
   {
     this.currentDisplayIndex=-1; //Reset the index if the current item index is same as the item index passed on button click
     return; //Don't execute further
   }
   this.currentDisplayIndex = index; //Set the current index to the item index passed from template. If you click on item number 3, only 3rd item details will be visible
      }

Upvotes: 2

Related Questions