Angular: refresh page post redirection

Question

Angular: refresh page post redirection

I am working on a function that redirects to another page, and I am looking to have the redirected page reload once the redirection is complete.

I specifically need the login page to reload after being redirected to it. The usual 'window.location.reload()' only reloads the current page, which is the home page, not the login page. How can I reload a specific page?

homeComponent.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, FormControl, Validators, Form } from '@angular/forms';
import { LoginComponent } from '../authentification/login/login.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit {
  
  ngOnInit(): void {
   
  }

  constructor(private router: Router) { }

  redirection(){
    this.router.navigate(['/login']);
   }
  
}

javascript angular typescript angular-routing angular-router

Answer 1

Answer №1

Have you considered implementing

redirect(){
   window.location.href="yourpagedomain/login"
 }

This method ensures the page is properly loaded.

Answer 2

Have you considered implementing

redirect(){
   window.location.href="yourpagedomain/login"
 }

This method ensures the page is properly loaded.

Answer 3

Answer №2

When accessing your login page, you have the opportunity to capture the navigate event. If this event is true, you can proceed to reload the form. Below is a revised version of the code to assist you:

On your login page:

OLD : Incorrect code

export class LoginPage implements OnInit {
  
  constructor(private router: Router) {
   router.events.subscribe(val => {
      if (val) {
        this.refreshForm(); // Refresh your form
      }
    });
  }
 
  ngOnInit(): void {

  }

}

EDIT : Updated and functional code :

export class LoginPage implements OnInit {

  constructor(private router: Router) {
   router.events.pipe(
      filter((events: RouterEvent) => events instanceof NavigationEnd),
    ).subscribe((val) => {
      if (val.url === 'LoginPage Url') { // Fill with your loginPage Url (eg. /tabs/tab1)
        this.refresh(); // Refresh your form
      }
    });
  }

  ngOnInit(): void {
  }
}

Answer 4

When accessing your login page, you have the opportunity to capture the navigate event. If this event is true, you can proceed to reload the form. Below is a revised version of the code to assist you:

On your login page:

OLD : Incorrect code

export class LoginPage implements OnInit {
  
  constructor(private router: Router) {
   router.events.subscribe(val => {
      if (val) {
        this.refreshForm(); // Refresh your form
      }
    });
  }
 
  ngOnInit(): void {

  }

}

EDIT : Updated and functional code :

export class LoginPage implements OnInit {

  constructor(private router: Router) {
   router.events.pipe(
      filter((events: RouterEvent) => events instanceof NavigationEnd),
    ).subscribe((val) => {
      if (val.url === 'LoginPage Url') { // Fill with your loginPage Url (eg. /tabs/tab1)
        this.refresh(); // Refresh your form
      }
    });
  }

  ngOnInit(): void {
  }
}

Angular: refresh page post redirection

Answer №1

Answer №2

Similar questions

What is the preferred method for accessing nested object properties in React props?

Analyzing the Threejs application for profiling purposes

Introducing the First Angular Factory

Retrieve the chosen date from a DatePicker using a Javascript function

Issue with ThreeJs: Difficulty loading separate images on top and bottom surfaces

Retrieving data from an array using an AJAX request function

Using framer-motion with Next.JS ensures that content remains consistent during navigation

Disable other actions during jquery change event validation

Finding out which side of a cube has been clicked---Let's identify the side

When attempting to send data using jQuery to PHP, an issue arises where PHP is unable to receive the information, resulting in an undefined variable

Disappear solely upon clicking on the menu

Tips for displaying autocomplete suggestions as clickable links?

Site performance stalls when a trailing slash is present in the URL while using Express routing

IE throws an exception when attempting to use Canvas as it is not supported

Changing a table cell's value when a button is clicked using Angular

Using dynamic tag names within React JSX can greatly enhance the flexibility and

Creating a tool to display mouse coordinates as a pointer on an HTML5 canvas

What could be the reason for TypeScript throwing an error that 'product' does not exist in type '{...}' even though 'product' is present?

Experiencing a problem with XAMPP? Changes made to the code are not reflected after saving

What should I do about typescript and ES6?