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

Tips for ensuring a program pauses until an observable is completed within an Angular application

Currently, I am working on a project using Angular. I encountered a situation where a call to the backend is made using an observable to fetch products. Below is an example of how the code appears: getProducts () : Product[] { this.http.get<[]>(this ...

What is the best way to programmatically set attributes on an HTML element or include HEAD/(LINK|TITLE) elements in Angular?

As I work on my Angular 12 application, I am facing the challenge of making it compatible with both LTR and RTL languages such as English and Arabic. This compatibility needs to be user-selectable within the application. Bootstrap, which provides the UI st ...

Having trouble getting a constructor to function properly when passing a parameter in

Here's the code snippet I'm working with: import {Component, OnInit} from '@angular/core'; import {FirebaseListObservable, FirebaseObjectObservable, AngularFireDatabase} from 'angularfire2/database-deprecated'; import {Item} ...

Unexpected Null Object Error in TypeScript Function

Hi there! I'm new to TypeScript and encountered an 'Object may be null' error in a function. The function is meant to add two LinkedLists together, each representing numbers (with each digit as its own node), and return a new LinkedList. Can ...

Transitioning an AngularJS factory to TypeScript

I'm currently in the process of transitioning an AngularJS application to Angular and one of the challenges I've encountered is converting my JavaScript code to TypeScript. While I've been successful with components and services, factories h ...

The Angular component fails to refresh after removing an image

After deleting an image, I have been struggling to find a way to update my component instantly without having to refresh the page. Despite trying various methods like using ChangeDetectorRef, I haven't been successful. Any advice on how to achieve thi ...

Utilize the component template content within Angular 2 for enhanced functionality

Looks like someone missed the memo on time stamps, asking a question after it has already been answered! Struggling with Angular 1 vs. Angular 2 differences, making simple tasks in Angular 1 seem overly complicated in Angular 2. In Angular 1, I had a que ...

The code inside the promise .then block is executing long before the promise has completed its

After spending quite some time working on this messy code, I finally have a functioning solution: loadAvailabilities() { let promises = []; let promises2 = []; let indexi = 0; //return new Promise((resolve, reject) => { this.appo ...

The Angular AOT compilation process is causing essential code to be stripped away from the openlayers

We have recently updated our project to use Angular 7 along with openlayers 5.3, and so far everything has been running smoothly. In an effort to improve initial loading times, we implemented several optimizations during the build process, including enabli ...

Issue with the code: Only arrays and iterable objects are permitted in Angular 7

Trying to display some JSON data, but encountering the following error: Error Message: Error trying to diff 'Leanne Graham'. Only arrays and iterables are allowed Below is the code snippet: The Data {id: 1, name: "Leanne Graham"} app.compone ...

The readline interface in Node that echoes each character multiple times

After creating a node readline interface for my project, I encountered an unusual issue. this.io = readline.createInterface({ input: process.stdin, output: process.stdout, completer:(line:string) => { //adapted from Node docs ...

Troubleshooting Angular 2 with TypeScript: Issue with view not refreshing after variable is updated in response handler

I encountered a problem in my Angular 2 project using TypeScript that I could use some help with. I am making a request to an API and receiving a token successfully. In my response handler, I am checking for errors and displaying them to the user. Oddly en ...

Working with Vue/Nuxt to loop through a collection of documents in Firestore using v-for

This is my first project using Vue and Firebase. I am working with NuxtJS (Vue v2.x) along with Vuetify and Firestore. My goal is to iterate through a collection of documents and display Vuetify Card components with the relevant data. Currently, all the ...

Implementing tailwindcss styles in a typescript interface with reactjs

In my code, I have a file named types.ts that defines an interface called CustomCardProps. I pass this interface to the CustomCard component within the home.tsx file. Additionally, I have a folder named constant with an index.ts file where I store values o ...

PhpStorm is unable to resolve the @ionic/angular module

I have encountered a peculiar issue with my Ionic v4 project. While the project runs smoothly, PhpStorm seems unable to locate my references to @ionic. https://i.stack.imgur.com/umFnj.png Interestingly, upon inspecting the code, I realized that it is act ...

What is the proper way to add an object to an array within an object in TypeScript?

import {Schedule} from './schedule.model'; export class ScheduleService{ private schedules:Schedule[]=[ new Schedule("5:00","reading"), new Schedule("6:00","writing"), new Schedule("7:00","cleaning") ]; getSchedule(){ ret ...

Having trouble with the clip-path in d3.js liquid fill gauge

Attempting to integrate the d3.js liquid fill gauge into my angular2 webapp has been a challenge. The clippath functionality seems to be malfunctioning, resulting in no wave being generated at all. https://i.stack.imgur.com/3Bmga.png instead of https://i. ...

Progress Bar Modules

I am currently working on creating a customizable animated progress bar that can be utilized as follows: <bar [type]="'health'" [percentage]="'80'"></bar> It is functional up to the point where I need to adjust different p ...

Issue with @Input causing detectChanges error in Angular 6 unit testing

A basic component is utilized to accept a configuration object as an input and utilize it to initialize certain values in the ngOnInit lifecycle hook. export class MyComponent implements OnInit { @input() config: ConfigObject; min: number; max ...

Checking to see if the prop 'isChecked' has been modified

I'm currently facing a challenge with testing whether a class's prop value changes after clicking the switcher. Below is the component class I am working with: import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core&a ...