Displaying UTC Time in FlexGrid Date Columns in Angular

Background

If your data source contains date-time values in SGT, Singapore Time, but you want to display those values in UTC inside Wijmo FlexGrid, use the Angular wjFlexGridCellTemplate directive on the required date-time columns. This lets FlexGrid stay bound to the original date values while displaying UTC-formatted text in the grid cells.

Steps to Complete

1. Install the required Wijmo Angular packages.
2. Import the Wijmo grid modules.
3. Prepare the SGT date-time values as JavaScript Date objects.
4. Create a reusable UTC formatter.
5. Add a FlexGrid column cell template.

Getting Started

Install the required Wijmo Angular packages

npm install @mescius/wijmo.angular2.grid @mescius/wijmo.angular2.grid.filter @mescius/wijmo.styles

In styles.css, import the Wijmo stylesheet:

@import '@mescius/wijmo.styles/wijmo.css';

• These packages provide the Angular FlexGrid components, the optional grid filter component, and the required Wijmo styles.

Import the Wijmo grid modules

import { Component } from '@angular/core';
import { WjGridModule } from '@mescius/wijmo.angular2.grid';
import { WjGridFilterModule } from '@mescius/wijmo.angular2.grid.filter';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WjGridModule, WjGridFilterModule],
  templateUrl: './app.component.html'
})
export class AppComponent {}

• WjGridModule enables wj-flex-grid, wj-flex-grid-column, and wjFlexGridCellTemplate. WjGridFilterModule enables wj-flex-grid-filter.

Prepare the SGT date-time values as JavaScript Date objects

rawData = [
  {
    id: 1,
    task: 'Order created',
    startTime: '2026-06-25T09:30:00+08:00'
  },
  {
    id: 2,
    task: 'Order shipped',
    startTime: '2026-06-25T14:00:00+08:00'
  }
];

data = this.rawData.map(item => ({
  ...item,
  startTime: new Date(item.startTime)
}));

• The +08:00 offset identifies the source value as SGT. Converting it to a Date object preserves the correct instant in time for UTC formatting.

Create a reusable UTC formatter

utcFormatter = new Intl.DateTimeFormat('en-GB', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false,
  timeZone: 'UTC',
  timeZoneName: 'short'
});

formatUtc(value: Date | string | null): string {
  if (!value) {
    return '';
  }

  const date = value instanceof Date ? value : new Date(value);
  return Number.isNaN(date.getTime()) ? '' : this.utcFormatter.format(date);
}

• The formatter uses timeZone: 'UTC', so each value is displayed in UTC regardless of the user’s local browser time zone.

Add a FlexGrid column cell template

<wj-flex-grid [itemsSource]="data" [autoGenerateColumns]="false">
  <wj-flex-grid-column [header]="'ID'" [binding]="'id'" [width]="70">
  </wj-flex-grid-column>

  <wj-flex-grid-column [header]="'Task'" [binding]="'task'" [width]="'*'">
  </wj-flex-grid-column>

  <wj-flex-grid-column [header]="'Start Time (UTC)'" [binding]="'startTime'" [width]="220">
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
      {{ formatUtc(cell.item.startTime) }}
    </ng-template>
  </wj-flex-grid-column>
</wj-flex-grid>

• The column remains bound to startTime, but the ng-template controls the displayed cell content. The cell.item object gives access to the row’s data item.

With this Angular setup, FlexGrid can continue binding to the original date-time values while displaying each date column in UTC. The wjFlexGridCellTemplate directive handles the display conversion, so users see UTC-formatted dates without requiring changes to the original data source.