Date is incorrect in grid due to timezone issues

I am working with dates in my Angular app. I'm not concered with times or timezones. I have a form that users can insert an object with a date property. The API is called and the record is stored in a MongoDB collection. I control the API and the datatype for the date property is Date and the value is stored in the DB like this: 2025-05-12T00:00:00.000+00:00

I also have a grid that displays all the records retrieved from the same API/DB. The API is called and the records are stored in an object that has a date property with type Date. When it comes back from the API and stored in teh object the property looks like this: 2025-05-12T00:00:00.000Z

The problem is that when the dates are displayed in the grid they are all off by one day: Sunday, May 11, 2025 I assume this has to do with the timezone being automatically applied in the grid even though I don't care about the time.

Here is the grid:

<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr class="bg-gray-200">
<th class="px-4 py-2">Date</th>
<th class="px-4 py-2">Type</th>
<th class="px-4 py-2">Name</th>
<th class="px-4 py-2">Description</th>
<th class="px-4 py-2">Cost</th>
<th class="px-4 py-2"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let meal of meals">
<td class="px-4 py-2">{{ meal.date | date: 'fullDate' }}</td>
<td class="px-4 py-2">{{ meal.type }}</td>
<td class="px-4 py-2">{{ meal.name }}</td>
<td class="px-4 py-2">{{ meal.description }}</td>
<td class="px-4 py-2">{{ meal.cost | currency: 'USD' }}</td>
<td class="px-4 py-2 flex justify-end">
<button class="btn btn-square btn-ghost" (click)="deleteMeal(meal._id!)">
<svg fill="#f00000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 482.428 482.429" xml:space="preserve" stroke="#f00000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path d="M381.163,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098 c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223,14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117 h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v-2.828 C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879 C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096 c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15.978-13,28.979-28.973,28.979H101.266 c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.897c15.973,0,28.973,13.001,28.973,28.979 V115.744z"></path> <path d="M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C158.074,417.012,163.926,422.863,171.144,422.863z"></path> <path d="M241.214,422.863c7.218,0,13.07-5.853,13.07-13.068V262.641c0-7.216-5.854-13.07-13.07-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z"></path> <path d="M311.284,422.863c7.217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07 c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863z"></path> </g> </g> </g></svg>
</button>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>


What do I need to do to make sure times are not considered or not taken into account when displaying in the grid?

Continue reading...