Angular: Converting SQL 24 hour time format to 12 hour time format

Question

I have the same problem as one stated here:

convert string to Time format in typescript

I can't convert SQL 24 hour Time type such as "15:00" and I get this error in the logs

InvalidPipeArgument: 'Unable to convert "15:00" into a date' for pipe 'DatePipe'

I understand that DatePipe only supports certain formats to be converted and string time is not one of them. I can't find any documentation detailing how to convert a string time to these accepted formats thus I abandoned the idea of DatePipe .

Then there is momentJs which is a great help but I have some trouble integrating it in dynamic material table. Since from my understanding it can only be used in typescript, unlike datePipe which can be used directly in html. As shown here in my code I can only get the time from the first array. I tried looping but I only get the last value.

HTML:

<ng-container matColumnDef="start_time">
      <th class="font" mat-header-cell *matHeaderCellDef mat-sort-header>Start Time</th>
      <td class="font-content" mat-cell *matCellDef="let row">{{ convertedTime }}</td>
    </ng-container>

Typescript:

grabTime(){
    this.dataService.grabTimeContent().subscribe(res=>{
      this.post= res.tableTime;

      this.timeChange = res.table[0].start_time;
      this.convertedTime = moment(this.timeChange, 'HH:mm').format('hh:mm A');
       
      this.dataSource = new MatTableDataSource(this.post);

  });
  }

Content:

tableTime:
   0:
      {
       start_time: "10:08"
      }
   1:
      {
       start_time: "15:25"
      }
   2:
      {
       start_time: "16:58"
      }
   3:
      {
       start_time: "20:18"
      }

I am open to recommendations such as using new packages. I understand the the code I provided above will only show the array 0, but I do not have anymore idea how to integrate it with a dynamic table.

Answer 1

Solution 1: Custom Pipe

You can format start_time with Custom Pipe.

to-twelve-hours-base.pipe.ts

import { Pipe } from '@angular/core';
import moment from "moment";

@Pipe({ name: 'ToTwelveHoursBase' })
export class ToTwelveHoursBasePipe {
  transform(value: string): string {
    return moment(value, 'HH:mm').format('hh:mm A');
  }
}

app.module.ts

import { ToTwelveHoursBasePipe } from './pipes/to-twelve-hours-base.pipe';

@NgModule({
  ...
  declarations: [ ..., ToTwelveHoursBasePipe ]
})
export class AppModule { }

.component.html

<ng-container matColumnDef="start_time">
  <th class="font" mat-header-cell *matHeaderCellDef mat-sort-header>Start Time</th>
  <td class="font-content" mat-cell *matCellDef="let row">{{ row.start_time | ToTwelveHoursBase }}</td>
</ng-container>

Sample Solution 1 on StackBlitz

---

Solution 2: With rxjs operator

Alternative, rxjs pipe/map operator also can be used to format start_time.

data.service.ts

grabTimeContent(): Observable<any> {
    const data = {
      tableTime: [
        {
          start_time: '10:08'
        },
        {
          start_time: '15:25'
        },
        {
          start_time: '16:58'
        },
        {
          start_time: '20:18'
        }
      ]
    };

    return of(data).pipe(
      map(x => {
        return {
          ...x,
          tableTime: x.tableTime.map(obj => {
            return {
              start_time: moment(obj.start_time, 'HH:mm').format('hh:mm A')
            };
          })
        };
      })
    );
  }

.component.html

<ng-container matColumnDef="start_time">
  <th class="font" mat-header-cell *matHeaderCellDef mat-sort-header>Start Time</th>
  <td class="font-content" mat-cell *matCellDef="let row">{{ row.start_time }}</td>
</ng-container>

Sample Solution 2 on StackBlitz