angular - jhipster y la fecha actual para mostrar y verificar

Parece una locura, pero no puedo encontrar una manera de comparar en un HTML creado por JHipster si un campo de fecha es mayor que la fecha actual.

Intento mostrar la fecha leída de la base de datos y veo 2020-12-12, luego intento mostrar la fecha actual. Buscando en internet encuentro que es posible obtener la fecha actual haciendo: new Date(). Así que intento mostrar esto, pero al ejecutar la página se muestra un error:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Parser Error: Unexpected token 'Date' at column 5 in [ {{new Date()}} ] in...

¿Cómo puedo obtener la fecha actual (para compararla con la que se lee de la base de datos)?

Aquí está el código de myclass.component.html donde necesito comprobar la fecha:

<div>
    <jhi-alert-error></jhi-alert-error>
...
    <div class="table-responsive" *ngIf="myclasses?.length > 0">
        <table class="table table-striped" aria-describedby="page-heading">
            <thead>
            <tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="transition.bind(this)">
            <th...
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let myclasse of myclasses ;trackBy: trackId">
                <td>{{myclass?.id}}</td>
                ...
                <td>
                  {{ new Date() }}
                </td>
 ...

Respuesta #1

Usualmente, es mucho más fácil trabajar con fechas usando la biblioteca MomentJS ya que ya está integrada en JHipster.

Si quieres saber si una fecha está en el futuro, puedes definir una función en tu [entity].component.ts que devuelva un valor booleano, así:

import * as moment from 'moment';
import { Moment } from 'moment';
...
  isFutureDate(date: Moment): boolean {
    return moment().isBefore(date);
  }

Luego, en tu [entity].component.html puedes llamarlo así:

<td>
  Date is in the future: {{ isFutureDate(myclass.date) }}
</td>

Donde myclass.date es la fecha que quieres verificar.

Si lo que necesitas es simplemente saber la diferencia entre esa fecha y ahora, también puedes hacerlo muy fácilmente. En tu ...component.ts:

import * as moment from 'moment';
import { Moment } from 'moment';
...
  getDateDiff(date: Moment): number {
    const diff      = date.diff(moment());
    const duration  = moment.duration(diff);
    return duration.asHours();
  }

Y en tu ...component.html:

<td>
  Difference in hours: {{ getDateDiff(myclass.date) | number: '2.0-0' }} hours
</td>

En este caso, getDateDiff() devolverá la diferencia en horas entre la fecha que pases como argumento (myclass.date) y la fecha actual (moment()). Será un número negativo si la fecha a comprobar está en el pasado.

MomentJS es una biblioteca muy poderosa, puedes consultar la documentación completa aquí. Además, si quieres, la documentación relativa a los métodos que utilicé:

• isBefore(): Si una fecha es anterior a otra
• diff(): Diferencia entre dos fechas en milisegundos
• duration(): Envoltorio para trabajar fácilmente con duraciones de tiempo
• asHours(): Obtiene la cantidad de horas en una duración