Use Moment.JS library for front-end date/time formatting i.e. http://bit.ly/2Fgnjj3

Hi Ramco,

To format the date string in Angular to display only the date part in dd/MM/yyyy format, use these approches.

Using Angular Date Pipe in HTML Template

If you have a date string like 2018-05-15T00:00:00.000+00:00 and you want to display it in dd/MM/yyyy format, you can use Angular's date pipe directly in your HTML template.

1. Install Angular Common Module (if not already installed): Ensure you have imported the CommonModule in your module where you want to use the date pipe.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ]
})
export class YourModule { }

Using the Date Pipe in HTML Template: Use the date pipe in your component's HTML template to format the date.

    {{ dateValue | date:'dd/MM/yyyy' }}

Example Component

Here's a full example to demonstrate how you can use the date pipe to format a date string in an Angular component:

Component TypeScript File (example.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  dateValue: string = '2018-05-15T00:00:00.000+00:00';
}

Component HTML File (example.component.html)

  
  Formatted Date: {{ dateValue | date:'dd/MM/yyyy' }}

Parsing and Formatting Date in TypeScript

If you need to format the date in TypeScript before binding it to the template, you can use the DatePipe from Angular's common module:

1. Import DatePipe in Your Component:

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  providers: [DatePipe]
})
export class ExampleComponent {
  dateValue: string = '2018-05-15T00:00:00.000+00:00';
  formattedDate: string;

  constructor(private datePipe: DatePipe) {
    this.formattedDate = this.datePipe.transform(this.dateValue, 'dd/MM/yyyy')!;
  }
}

Use the Formatted Date in HTML:

  Formatted Date: {{ formattedDate }}

By following these steps, you can easily format your date strings to display only the date part in dd/MM/yyyy format in your Angular application.

Thanks

Hi Amit

  I am using ANgular 17

Thanks

Try this once: import CommonModule in your module and add CommonModule to the imports array

Hello Ramco,

Checkout the below example of angular

app.component.ts

import { DatePipe } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  date = new Date();
}

app.component.html

Format Date as dd/MM/yyyy in Angular
{{ date | date: 'dd/MM/yyyy' }}

Running example on below link

https://stackblitz.com/edit/format-date-as-ddmmyyyy-angular

Thanks

Vishal Joshi

Hi Vishal

   Still getting same error. I am using angular 17

import { DatePipe } from '@angular/common';

D.O.B : {{ record.dateOfBirth | date: 'dd/MM/yyyy' }}

Thanks

Hello Ramco

Add the below code to the component TS file.

import { DatePipe } from '@angular/common';

Thanks

Hi

  I am getting error - No Pipe found with name Date

Thanks

Hello Ramco,

You can use the DatePipe in angular to format the date.

DatePipe Syntax

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

Angular component HTML file you can use like below sample code

{{ dateObj | date:"dd/MM/yyyy" }}

Thanks

Vishal Joshi

If you are using Angular's template syntax for formatting dates directly in the HTML, you can use the date pipe directly in the template:

{{ '2018-05-15T00:00:00.000+00:00' | date:'dd/MM/yyyy' }}