Open In App
Related Articles

How to refresh entire application when date is changed in angular 9 ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In this example, we will see how to refresh the application when the date is changed in angularJS.

Approach:

  • First, we need to write the code for displaying the date picker in an HTML file.
  • We can achieve this by giving the input type as the date.
  • After completing the input type, we need to declare a function on the ‘onchange’ event so that whenever the date is changed or modified the application will be reloaded.
  • After declaring the function in the HTML file we need to write the function implementation in the ts file.
  • In the function implementation, we can use the window property of DOM, and we can call the reload function so that the application is reloaded.
  • After completing the above steps, serve or start the project.

Code Implementation:

app.component.ts:

Javascript

import { Component } from '@angular/core';
  
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor() { }
  
    // Function to reload the application
    refreshPage() {
        window.location.reload();
    }
}

                    


app.component.html:

HTML

<h1>Hello User !</h1>
  
<p>Change the date to refresh the application.</p>
  
<input type="date" (change)="refreshPage()">

                    


app.module.ts:

Javascript

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

                    

Output:



Last Updated : 17 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads