Angular 8 date input binding date value

Hello to all, welcome to therichpost.com. In this post, I will tell you, 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": [
              "src/styles.css",
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "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';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule
  ],
  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';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
  BirthDate:Date;
  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">
      <label>Date:</label>
      <div class="input-group">
        <input type="date" class="form-control" id="BirthDate" name="BirthDate"
        [ngModel]="BirthDate | date:'yyyy-MM-dd'"  formControlName="BirthDate">
      </div>
    </div>
  </form>
</div>

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.

Jassa

Thanks