CODEWITHSUNDEEP
javascriptangulartypescriptdatetimetime
tomek niewiem
tomek niewiem

Reputation: 159

How to calculate and display time diffrence in minutes Angular2

I have an angular app which shows orders using *ngFor, each order have a datetime field with date it was created. I want to create a timer which shows how long customer is waiting for his order in minutes, calculate difference between order.time and now. I tried using amDifference pipe but for some reason it showed the same output for all records. It would be easy to do it for one item but I have no clue how to do it inside *ngFor loop.

<mat-card class="order-card" *ngFor="let order of orders?.orders">
  <mat-card-subtitle>
    Customer Name: {{ order.customerName }}
  </mat-card-subtitle>

  <mat-card-subtitle>
    Table Number: {{ order.tableNumber }}
  </mat-card-subtitle>

  <mat-card-subtitle>
    Food: {{ order.food }}
  </mat-card-subtitle>

  <mat-card-subtitle>
    Drink: {{ order.drink }}
  </mat-card-subtitle>

  <mat-card-subtitle>
    Estimated Wait Time: {{ order.waitTime }} minutes
  </mat-card-subtitle>

  <mat-card-subtitle>
    Actual wait time: <!-- this is where I want to display dynamic time diffrence between now and order.time -->
  </mat-card-subtitle>
  <button mat-button class="delete-button" color="primary" (click)="deleteOrder(order.orderId)">Remove Order</button>
</mat-card>

Upvotes: 1

Views: 1079

Answers (2)

javapedia.net
javapedia.net

Reputation: 2731

I took a different approach than using amDifference/custom pipes. See my code and suggest/share feedback. I am precalculating the minute difference at the class itself.

order.ts

export class Order {
mins:number;
    constructor(private id:number, private time:Date, private now:Date) {
        let diffInMilliSecs:number  = (this.now.getTime()-time.getTime()) ;

        let diffinMins: number = diffInMilliSecs / 1000/60;
        this.mins =Math.round(diffinMins);
    }
}

app.component.ts

import { Component} from '@angular/core';
import { Order } from './order';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  title = 'Orders';
  dateNow=new Date();



  orders = [ new Order(1,new Date("13 Mar 2019 19:50:14 EDT"),this.dateNow),
  new Order(1,new Date("13 Mar 2019 20:15:20 EDT"),this.dateNow),
  new Order(1,new Date("13 Mar 2019 20:45:55 EDT"),this.dateNow),
  new Order(1,new Date("13 Mar 2019 20:15:02 EDT"),this.dateNow),
  new Order(1,new Date("13 Mar 2019 20:15:00 EDT"),this.dateNow)];

}

app.component.html

<h1>  {{title}} </h1>
<h3> Time Now: {{dateNow}}</h3>

<table>
  <tr><th> Order#</th> <th>Order time</th> <th>Wait time (in mins)</th></tr>
  <tr *ngFor="let order of orders">
    <td>{{order.id}}</td>
    <td>{{order.time | date:'medium'}}</td>
     <td>{{order.mins}}</td> 
  </tr>

</table>

Output

Upvotes: 1

Kevin Z. Li
Kevin Z. Li

Reputation: 566

You could try this

{{ new Date() | amDifference:  order.time : 'minutes'}} minutes

Upvotes: 0

Related Questions