How to get current date in angular in HTML inline


In Angular, you can easily get the current date using the `Date` object. Here's how to do it:

First, let's create a new Angular project using the CLI:

bash

ng new my-app

cd my-app

Next, open the `src/app/app.component.ts` file and add the following code:

typescript

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

currentDate: Date;

ngOnInit() {

this.currentDate = new Date();

}

}

In this code, we're importing the `Date` object from the `@angular/common` module and creating a new instance of it in the `ngOnInit` method. We then assign this instance to the `currentDate` property of our component.

Now, let's open the `src/app/app.component.html` file and add the following code:

html

Current Date:

{{ currentDate }}

In this code, we're displaying the value of the `currentDate` property in an HTML paragraph element.

When you run your app using the command `ng serve`, you should see the following output:

html

Current Date:

Thu Aug 18 2021 14:37:59 GMT-0400 (Eastern Daylight Time)

This is the current date and time in your local timezone.

If you want to display the date in a specific format, you can use the `toLocaleString` method of the `Date` object. Here's an example:

typescript

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

currentDate: Date;

ngOnInit() {

this.currentDate = new Date();

}

}

In this code, we're using the `toLocaleString` method to format the date as "MM/DD/YYYY" and displaying it in an HTML paragraph element.

html

Current Date:

{{ currentDate.toLocaleString() }}

When you run your app using the command `ng serve`, you should see the following output:

html

Current Date:

8/18/2021

This is the current date in the format "MM/DD/YYYY".

If you want to display the date in a specific timezone, you can use the `setTimeZone` method of the `Date` object. Here's an example:

typescript

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

currentDate: Date;

ngOnInit() {

this.currentDate = new Date();

this.currentDate.setTimeZone('America/New_York'); // set timezone to Eastern Time

}

}

In this code, we're using the `setTimeZone` method to set the timezone of the `currentDate` instance to "America/New\_York" (Eastern Time). We then display the date in the same HTML paragraph element as before.

html

Current Date:

{{ currentDate }}

When you run your app using the command `ng serve`, you should see the following output:

html

Current Date:

Thu Aug 18 2021 14:37:59 GMT-0400 (Eastern Daylight Time)

This is the current date and time in Eastern Time.

In summary, getting the current date in Angular is as simple as creating a new instance of the `Date` object and displaying its value in an HTML element. You can also format the date using the `toLocaleString` method and set the timezone using the `setTimeZone` method.






© 2024 - ErnesTech - Privacy
E-Commerce Return Policy