by Sai gowtham

Getting a current year in Angular App

In this tutorial, we are going to learn about how to get a current year in the angular app using the new Date() constructor.

Using new Date() constructor

The new Date() constructor contains a getFullYear() method, which returns the current year in four-digit (2020) format according to the user local time.

Here is an example, that renders the current year in the footer component of our angular app.

footer.component.ts
import { Component} from '@angular/core';

@Component({
  selector: 'my-footer',
  templateUrl: './footer.component.html',
  styleUrls: [ './footer.component.css' ]
})

export class FooterComponent  {
  currentYear = new Date().getFullYear(); // 2020}
footer.component.html
<footer>
  <p> CopyRight {{currentYear}} </p></footer>

There is also other method called getUTCFullYear() which returns the current year according to the universal time instead of user local time.

footer.component.ts
import { Component} from '@angular/core';

@Component({
  selector: 'my-footer',
  templateUrl: './footer.component.html',
  styleUrls: [ './footer.component.css' ]
})

export class FooterComponent  {
  currentYear = new Date().getUTCFullYear(); // 2020}
footer.component.html
<footer>
  <p> CopyRight {{currentYear}} </p></footer>

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course