Home Angular 8 Angular 8 date input binding date value

Angular 8 date input binding date value

by therichpost
Published: Last Updated on 1 comment

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 date input binding date value.

Angular 8 date input binding date value
Angular 8 date input binding date value

In reactive form, I am binding form date input field with today date. I have used Angular 8 and Bootstrap 4.

Guys Angular 11 came and also angular 12 will come soon and here are some important posts related to angular 11: Angular 11 Tutorials

Here are the complete steps, please follow carefully:

1. Here are the basics commands to install angular 8 on your system:

npm install -g @angular/cli 

ng new angulardate //Create new Angular Project

cd angulardate // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url


2. After done with above, you need to run below commands to set bootstrap environment into your angular 8 application:

npm install --save bootstrap


3. Now you need to add below code into your angular.json file:

"styles": [
            "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]


4. Now you need to add below code into your src/app/app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }


5. Now you need to add below code into your src/app/app.component.ts file:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormsModule } from '@angular/forms';
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
export class AppComponent {
  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.BirthDate = new Date();
    this.registerForm = this.formBuilder.group({
    BirthDate : ''



6. Now you need to add below code into src/app/app.component.html file:

<div class="container">
  <h1 class="text-center">Angular 8 get dynamic today date in date field:</h1>
  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <div class="input-group">
        <input type="date" class="form-control" id="BirthDate" name="BirthDate"
        [ngModel]="BirthDate | date:'yyyy-MM-dd'"  formControlName="BirthDate">


In the end, don’t forgot to run ng serve command. If you have any query then do comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.



You may also like

1 comment

arunagirinathan.v October 12, 2022 - 7:19 am

Html file

this.personalInfoform = this.formBuilder.group({
dateOfBirth: [“”, [Validators.required]]
this.dOB= this.datepipe.transform(’12-12-2000′, ‘dd-MM-yyyy’);
this.personalInfoform.controls[“dateOfBirth”].patchValue(this.dOB );


above is not binding data in frontend .


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.