Categories

Sunday, September 26, 2021
therichposts@gmail.com
Angular 8Bootstrap 4

Angular 8 date input binding date value

Angular playing api data

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": [
              "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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

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