To convert time from 24Hr(format) to 12Hr(format)

My api response(services) is like this:

 request_id: 260
 meeting_time: "16:00"
 service_name: "Life Insurance"
 request_id: 261
 meeting_time: "15:00"
 service_name: "Car Insurance"

I want show the meeting_date i,e(16:00) as 4PM(i,e 12 Hrs format).How can i do this?
I don’t want show this time in date/time picker, I just want to wrap it inside some <p> tag like this:

<div *ngFor="let service of services">

you need create pipe

then i add this code in the HourPipe file

import { Pipe, PipeTransform } from '@angular/core';

  name: 'hour'
export class HourPipe implements PipeTransform {
  transform(time: any): any {
    let hour = (time.split(':'))[0]
    let min = (time.split(':'))[1]
    let part = hour > 12 ? 'PM' : 'AM';
    min = (min + '').length == 1 ? `0${min}` : min;
    hour = hour > 12 ? hour - 12 : hour;
    hour = (hour + '').length == 1 ? `0${hour}` : hour;
    return `${hour}:${min} ${part}`

after that in app.mdoule.ts file you have to add HourPipe under the declarations

and in .html file

it will be like this

{{ '16:00' | hour }} // this return 04:00PM

Or you could just stand on the shoulders of giants:

format(parse(time, "HH:mm", new Date()), "h:mma");


If you’re using that pipe in production, beware that it treats noon as midnight.

You are absolutely right, I thought about it when I wrote it to share it, I will take into account what you say and improve this for the pipe