1. app.component.html:
<div style="text-align: center;">
<h1>{{title}}</h1>
<h3>Todays Date is :{{today|date:'dd-MM-YYYY'}}</h3>
<h3>Your Birth Date is :{{dob | date:'dd-MM-YYYY'}}</h3>
<input type="date" [(ngModel)]="dob"><br><br>
<button (click)="ageCalculator()">Calculate</button><br><br>
<h2>Your ar :{{Age}} Year Old</h2>
</div>
2. app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Your Age Calculator';
public dob:Date=new Date(); //-----------------------------------------
new Date() - creates a Date object representing the current date/time
public today:number = Date.now();
//public Age:Date=new Date();
public Age:number=0;
ageCalculator()
{
if (this.dob) {
//convert date again to type Date
const bdate = new Date(this.dob);
const timeDiff = Math.abs(Date.now() - bdate.getTime() );
// 1. geTime() returns number of milliseconds 2. Date.now() -
returns the number of milliseconds since midnight 01 January, 1970 UTC
this.Age = Math.floor((timeDiff / (24 * 3600 * 1000)) / 365);
}
}
3. app.module.ts: Change only 2 Line
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
