Minimize the amount of information retrieved and shown based on the timestamp

I am currently working on storing and retrieving the date of a user request.

For creating the timestamp, I use this code:

const date = firebase.firestore.FieldValue.serverTimestamp();

This is how I fetch and display the data:

<tr class="tr-content" *ngFor="let request of requests" routerLink="/admin/requests/{{ request.id }}">
  <th scope="row" class="text-center"> {{ request.id }} </th>
  <td>{{ request.name }}</td>
  <td>{{ request.company }}</td>
  <td>{{ request.type }}</td>
  <td>{{ request.budget }}</td>
  <td>{{ request.date.toDate() }}</td>
  <td class="text-center"> > </td>
</tr>

Although it functions correctly, the displayed data looks like this:

Sun Jun 30 2019 14:03:37 GMT+0300 (Eastern European Summer Time)

Is there a way to streamline the information being shown? For instance, displaying only the date and possibly the time.

Answer №1

If you want to format dates in Angular, you have a couple of options. One way is to use the date pipe, as shown here:

<td>{{ request.date.toDate() | date:'dd/MM/yy'}}</td>
. Another option is to utilize Moment.JS with Angular, which you can learn more about at this link.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with font-size changes using css variables in Angular not updating in browser for specific fields

Utilizing CSS variables, I have implemented a feature that allows users to adjust the font size to small, medium, or large. While this functionality works correctly for most fields, there are certain instances where the value is applied but not displayed. ...

Exploring Angular 6: Unveiling the Secrets of Angular Specific Attributes

When working with a component, I have included the angular i18n attribute like so: <app-text i18n="meaning|description"> DeveloperText </app-text> I am trying to retrieve this property. I attempted using ElementRef to access nativeElement, bu ...

In React Typescript, there is an issue with react-router v4 where the Route component does not pass its props to the specified component

Struggling with React Router v4 and history usage in Browserrouter. Whenever attempting to access this.props.history.push("/"), the error pops up: TS2339: Property 'history' does not exist on type 'Readonly<{ children?: ReactNode; }> ...

Having trouble mocking useAppSelector in Jest, RTL, Redux Toolkit, and React testing

I have react redux toolkit installed and have replaced vitest with jest for testing purposes. My goal is to test whether the modal window is rendered in the App component when the isOpen flag is true. I only mock the part of the store that is necessary, n ...

Utilizing a TypeScript definition file (.d.ts) for typings in JavaScript code does not provide alerts for errors regarding primitive types

In my JavaScript component, I have a simple exporting statement: ./component/index.js : export const t = 'string value'; This component also has a TypeScript definition file: ./component/index.d.ts : export const t: number; A very basic Typ ...

Observing rxjs Observable - loop through the results and exit when a certain condition is met / encountering an issue with reading property 'subscribe' of an undefined value

I'm fairly new to working with rxjs and I've been struggling to find the right operator for what I want to achieve. Here's my scenario - I have an array that needs to be populated with results from another observable. Once this array has en ...

"A problem with PrimeNG where the model value does not get updated for the p-auto

<p-autoComplete [style]="{'width':'100%'}" name="searchSuggestions" [(ngModel)]="suggestion" (completeMethod)="searchSuggestions($event)" [suggestions]="searchSuggestionsResult" field="field"></p-autoComplete> Utilizing t ...

The deployment on Heroku is encountering issues due to TypeScript errors related to the MUI package

As someone relatively new to TypeScript and inexperienced in managing deployments in a production setting, I've been working on a project based on this repository: https://github.com/suren-atoyan/react-pwa?ref=reactjsexample.com. Using this repo has a ...

Building a filter for a union type in TypeScript: a step-by-step guide

Allow me to present an example to demonstrate my current objective. const v1: { type: "S"; payload: string } = { type: "S", payload: "test" }; const v2: { type: "N"; payload: number } = { type: "N", payload: 123 }; type Actions = typeof v1 | typeof v2; ...

Angular's Mysterious Pipe

When navigating to the indice page, I want to adjust the number formatting in the cours column to display two decimal places. For instance: 11345.654589 should be displayed as 11345.65. https://i.stack.imgur.com/tjvWb.png To achieve this, I have created ...

Trigger a modal from one sibling Angular component to another

My application utilizes an Angular6 component architecture with the following components: <app-navbar></app-navbar> <app-dashboard></app-dashboard> The Dashboard component consists of: <app-meseros> </app-meseros> < ...

How can TypeScript leverage the power of JavaScript libraries?

As a newcomer to TypeScript, I apologize if this question seems simplistic. My goal is to incorporate JavaScript libraries into a .ts file while utilizing node.js for running my program via the console. In my previous experience with JavaScript, I utilize ...

Receive Angular error messages in another foreign dialect

If I set up an Angular Reactive form to include validation like this this.formGroup = this._formBuilder.group({ formControl: new FormControl(null, [Validators.required]) }); Which means the input is required. When attempting to submit with a blank inpu ...

In TypeScript, is it possible to indicate that a function will explicitly define a variable?

In TypeScript, I am working on creating a class that delays the computation of its information until it is first requested, and then caches it for future use. The basic logic can be summarized as follows. let foo: string | undefined = undefined; function d ...

Create an array using modern ES6 imports syntax

I am currently in the process of transitioning Node javascript code to typescript, necessitating a shift from using require() to import. Below is the initial javascript: const stuff = [ require("./elsewhere/part1"), require("./elsew ...

Guide on sending information from a parent component to a child component in Angular using an event system

Is it possible to pass data from a parent component to a child component in Angular using a tab group? <mat-tab-group> <mat-tab label="Some text0"> <app-comp></app-comp1> </mat-tab> <mat-tab label="Some ...

ngx-loading is a fantastic addition to Angular 7, ensuring that the spinner is continually visible

While using ngx-loading to display a spinner during server response retrieval, I encountered an issue. The spinner works properly by appearing when the request is sent and disappearing once the server response is received. However, if I click on the area w ...

Utilizing either Maps or Objects in Typescript

I'm in the process of developing a simple Pizza Ordering App. The concept is, you select a pizza from a list and it's added to a summary that groups all the selections together. Here's how I want it to appear: Pizza Margarita 2x Pizza Sala ...

Having trouble retrieving query properties in AngularJS and Firebase

Seeking assistance with a Firebase query issue. While the rest of my application functions properly in terms of retrieving and working with data, I seem to be encountering an error specifically with Firebase queries and accessing their properties. Despite ...

What is the best way to showcase information in Angular?

I am facing an issue where my cards are not displaying data from the database, they appear empty. Can anyone provide a solution to help me fix this problem? Below is the output I am getting, with the empty cards that I want to populate with data. MY TS: l ...