Here's a quick summary of the situation:
- I recently upgraded my application to the latest version of Angular, moving from 5 to 6.
- All deployments in the
packages.jsonfile were updated using theng updatecommand.
In my application, I save a Date() value in the Cloud Firestore database under the field birthday_date (timestamp), utilizing an input with the DatePicker component from Angular Material.
Prior to updating the dependencies, the birthday_date (timestamp) field returned a value of type
Date (), allowing me to use{{ data.birthday_date | date }}.After updating the dependencies in
package.json, the return is now a value of typeTimestampin the birthday_date (timestamp) field.To retrieve a
Date ()object now, I need to call thetoDate ()method.{{ data.birthday_date.toDate() | date }}
The earlier return was a
Date ()object:Sat May 19 2018 20:35:12 GMT-0300Post-update, the return is a
Timestampobject:Timestamp {seconds: 1527476400, nanoseconds: 0}
Updates in package.json involved:
"firebase": "4.11.0", ->
"firebase": "5.0.3"
"angularfire2": "5.0.0-rc.6", ->
"angularfire2": "5.0.0-rc.9",
Below depicts snippets of code from my application:
mycomponent.component.html:
<form name="myForm" [formGroup]="myForm" class="w-100-p">
<mat-form-field fxFlex="30">
<input matInput [matDatepicker]="picker" formControlName="birthday_date " placeholder="Date of birth">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker startView="multi-year" disabled="false" touchUi="true"></mat-datepicker>
</mat-form-field>
</form>
The date does not display in the input due to returning a Timestamp, while the DatePicker component requires a Date () value.
list.component.ts:
<ng-container cdkColumnDef="birthday_date">
<mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Date of birth</mat-header-cell>
<mat-cell *cdkCellDef="let data" fxHide fxShow.gt-xs>
<p class="text-truncate">{{ data.birthday_date | date }}</p>
</mat-cell>
</ng-container>
If I do not invoke the toDate () method like
{{ data.birthday_date.toDate() | date }}ListComponent.html:81 ERROR Error: InvalidPipeArgument: 'Unable to convert "Timestamp(seconds=1526698800, nanoseconds=0)" into a date' for pipe 'DatePipe'
at invalidPipeArgumentError (common.js:4238)
at DatePipe.push../node_modules/@angular/common/fesm5/common.js.DatePipe.transform (common.js:5151)
at checkAndUpdatePureExpressionInline (core.js:10801)
at checkAndUpdateNodeInline (core.js:11375)
at checkAndUpdateNode (core.js:11333)
at debugCheckAndUpdateNode (core.js:11970)
at debugCheckRenderNodeFn (core.js:11956)
at Object.eval [as updateRenderer] (ListComponent.html:81)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:11948)
at checkAndUpdateView (core.js:11320)
The Solution I Seek:
I am searching for a way to revert back to returning a Date() object instead of a Timestamp, as this modification has affected multiple parts of my application and is causing delays in my project.