The challenge with handling dates in PrimeNG datatable on Angular

I need to include the date in each column of my datatable. The date is received through json and appears as follows:

JSON Date

1504836960000

Currently, I am formatting it using piping and ng-template:

<ng-template pTemplate="body" let-order="rowData">
   {{order.sla.slaEnd | date:'yMdjm'}}
</ng-template>

After the formatting, the date looks like this: 8.9.2017, 04:16

Complete code for the column

<p-column field="sla.slaEnd" header="SLA">
    <ng-template pTemplate="body" let-order="rowData">
        {{order.sla.slaEnd | date:'yMdjm'}}
    </ng-template>
</p-column>

The issue arises when sla.slaEnd == null, resulting in an error and collapsing of the page. I have made several attempts to address it but have been unsuccessful in checking if sla.slaEnd != null. My goal is to determine whether it is null, and if so, display nothing (''). If it is not null, then show the formatted date. Is there a solution to this problem?

Answer №2

Have you given a shot at using the *ngIf directive in your Angular code?

<p-column *ngIf="sla.slaEnd" field="sla.slaEnd" header="SLA">
    <ng-template pTemplate="body" let-order="rowData">
        {{order.sla.slaEnd | date:'yMdjm'}}
    </ng-template>
</p-column>

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

What is the best way to implement a timeout and subsequently clear it in a React functional component?

Hello there, I am currently working on a functional component in ReactJS and I am facing an issue with implementing a timeout on mouse hover over a menu. The timeout functionality is working fine, but I am struggling to clear this timeout in another funct ...

Tips for effectively managing components during navigation within dynamically loaded components

Our interface includes 3 main navigations for tab views: tab1, tab2, and tab3. Additionally, there is a navigation from the side menu. Each tab dynamically loads components, allowing seamless navigation between different parts of the application. When sw ...

Leverage jsencrypt in Ionic 3

Struggling to hash passwords for login on my Ionic 3 app, I attempted using jsencrypt following a tutorial but encountered issues as I couldn't grasp how it works... Here's what I tried : npm install --save jsencrypt import { Component } from ...

Issue with NgOnInit not properly subscribing to observable when using mockActivatedRoute in Jasmine test scenarios

Below is a simple component that I have. All necessary imports should be assumed: //my-component.component.ts //imports, decorator, etc. routingNumber: number; ngOnInit() { this.route.params.subscribe( params => { this.routingNumber = +p ...

Observable subscription results in a return of undefined

My observable is being filled with data from the backend using a service. The backend is providing the correct data, but I am having trouble building a pie chart with the values from the observable. The relevant part of the code is as follows: this.dataSe ...

Encountering Compilation Error When Using RxJS Observable with Angular 6 and Swagger Codegen

Encountering TypeScript compiler errors related to rxjs while working with Angular 6 and Swagger Codegen: Cannot find module 'rxjs-compat/Observable' Referenced the following link for assistance: https://github.com/ReactiveX/rxjs/blob/master/M ...

What is the best way to update a BehaviorSubject holding an array without replacing the entire array?

When it comes to adding items to an array BehaviorSubject, the common practice is to assign a copy of the entire array along with the new item using next(). However, I am looking for a way to push items into this array without having to assign a full copy ...

Issue with TypeScript when using destructuring on an object

When attempting to destructure data from an object, I encountered the error message Property XXXX does not exist on type unknown. This issue arose while using React Router to retrieve data. let {decoded, reasonTypes, submissionDetails} = useRouteLoaderDa ...

Is it possible to write TypeScript and execute it directly with Node?

I am attempting to write some basic typescripts but I am encountering an issue with the setup below: node src/getExchangeAndTickerList.ts import * as mkdirp from 'mkdirp'; ^^^^^^ SyntaxError: Cannot use import statement outside a module ...

Invalid input: The provided string is not recognized as a valid number

Currently, I am developing a website with Angular that is linked to an ASP.Net backend for database access. The error I am encountering pertains to a custom Async Validator integrated into a Form Control. This validator serves the purpose of verifying if a ...

Oops! The program encountered a TypeError stating that it cannot read the property 'open' since it is undefined

Using Angular 6, I have implemented an API call in a service and subscribed to it in my controller. The data is successfully received, but I want to restructure it in the controller so that I can later pass it into a Chart JS chart. Here is the code snipp ...

Unresolved conflict stemming from an HTML closing tag in the index.html file, despite both source and destination files being identical

I am currently facing a challenge while trying to merge my code with the master branch through a pull request. The conflict arises in the src/index.html file, specifically on line 17 which states </html> needs to be corrected to </html>. It&apo ...

Extending Enums in Typescript: A Comprehensive Guide

How can you work with a list of constants or Enum? Here is an example: enum MyList { A, B } enum MyList2 { C } function process<T>(input:MyList | T):void { } process<MyList2>(123) // The compiler does not recognize that 123 ...

Angular auto suggest feature

I am working with a dropdown in Angular that contains JSON data. The data is stored in a List named options and I need to display the name field in the dropdown list. My current task involves implementing an autocomplete search feature for this dropdown. ...

Error encountered when trying to create a Google Calendar event using the Google Calendar API on a Google business account with writer access

Utilizing the Google Calendar API within my Angular 9 Web Application, I am attempting to create events on a Google Calendar in my G Suite domain. Within the G Suite Admin Console, I have granted the service account permissions for the scopes and I have ...

Creating a dynamic selection in Angular without duplicate values

How can I prevent repetition of values when creating a dynamic select based on an object fetched from a database? Below is the HTML code: <router-outlet></router-outlet> <hr> <div class="row"> <div class="col-xs-12"> & ...

Issues have been reported with Angular 10's router and anchorScrolling feature when used within a div that is positioned absolutely and has overflow set

I feel like I may be doing something incorrectly, but I can't quite pinpoint the issue. Any help or pointers would be greatly appreciated. My current setup involves Angular 10 and I have activated anchorScrolling in the app-routing.module file. const ...

Testing Angular Components Using HostListener

I am looking to write unit tests for @HostListener, but I'm unsure of how to go about it since it's located on top of the component. Here is an example of the code: @HostListener('document:click', ['$event']) onDocumentClick ...

Angular - Integrating the Latest Firebase Features

Seeking to update the values in my form, I am encountering difficulty in obtaining the firebase key of the table. A button on the form is designed to display the values upon click, enabling users to make changes and save them to Firebase by clicking the Up ...

Is it possible to configure npm to publish to an organization different from the one automatically detected from package.json?

We are looking to implement a process in our open source project where all Pull Requests will be published to npm using CI/CD. To reduce the potential for supply chain attacks, we aim to deploy to a separate organization. Can this be achieved without makin ...