Convert minutes to hours in angular2 component or pipe

Question

In my application storing the duration value in minutes in back end and displaying the data in front end if duration value is below 1 hour in minutes and the same value is equal to above 1 hour in hours.

<strong *ngIf="event.eventDuration > 0 && event.eventDuration/60 < 1">{{event.eventDuration}} Minutes<br/></strong>
<strong *ngIf="event.eventDuration > 0 && event.eventDuration/60 >= 1">{{event.eventDuration/60}} Hour(s)<br/></strong>

Is this best way or write component function and return the value from the function? also component functions are calling too many times if we call from element attribute.

Answer 1

I would create a pipe like this...

@Pipe({
  name: 'myTime'
})
export class MyTimePipe implements PipeTransform {
  transform(value: number): string {
     if(value > 0 && value/60 < 1) {
       return value + ' Minutes';

     } else {
       return value/60 + ' Hour(s)';
     }
  }
}

and use it in your template as follows:

{{event.eventDuration | myTime}}

Answer 2

Another Way without using PIPE

    transformMinute(value: number): string {
    let hours = Math.floor(value / 60);
    let minutes = Math.floor(value % 60);
    return hours + ' hrs ' + minutes + ' mins';
  }

at HTML

{{transformMinute(event.eventDuration)}}

Answer 3

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'm2h'
})
export class MinutesToHours implements PipeTransform {
  transform(value: number): string {
    let hours = Math.floor(value / 60);
    let minutes = Math.floor(value % 60);
    return hours + ' hrs ' + minutes + ' mins';
  }
}

Answer 4

TimeConversion(TimeValue: number): string {

    let hours = Math.floor(TimeValue/ 60);

    let minutes = Math.floor(TimeValue% 60);

    let seconds= Math.floor(TimeValue% 60);

    return hours + ':' + minutes + ':' + seconds ;
}

This will return ---> example: 5:25:12