Refreshing a page in Angular 4/5 using TypeScript

Question

Refreshing a page in Angular 4/5 using TypeScript

I am currently working on a single-page application that utilizes routes for navigation:

this.router.navigate(['/customer-home'], { skipLocationChange: true });

While on the customer home page, I have a feature to add a new customer via a REST call. Once the customer is successfully added, I want the page to automatically refresh and display the updated /customer-home view.

My current approach is as follows:

addNewCustomer(customer) {
    this.dataService.postEntity('customers', customer);
    location.reload();
}

The issue with using location.reload is that it refreshes the page and redirects me to the home page.

I checked the console log for the location:

Location {replace: ƒ, assign: ƒ, href: "http://localhost:4200/", ancestorOrigins: DOMStringList, origin: "http://localhost:4200", …}

Is there a way for me to reload the page and data without explicitly refreshing the location in the browser's address bar?

On a side note, I attempted redirecting to another component and then returning to the current one, but this method failed to reload the data and show the newly added customer details.

angular typescript routes angular4-router

Answer 1

Answer №1

Utilizing Location.reload within a Single Page Application goes against the core principles of SPAs.

It appears as though you are attempting to refresh the page in order to retrieve updated data from your server.

The responsibility of loading data should not fall on the Router. Instead of triggering a page reload, consider fetching the data upon insertion or during the callback function of your postEntity method.

Alternatively, rather than making another request for data, consider simply adding the Entity to the existing array of customers or whatever storage mechanism you are using.

Answer 2

Utilizing Location.reload within a Single Page Application goes against the core principles of SPAs.

It appears as though you are attempting to refresh the page in order to retrieve updated data from your server.

The responsibility of loading data should not fall on the Router. Instead of triggering a page reload, consider fetching the data upon insertion or during the callback function of your postEntity method.

Alternatively, rather than making another request for data, consider simply adding the Entity to the existing array of customers or whatever storage mechanism you are using.

Answer 3

Answer №2

If you are looking to redirect or reload to your customer page, one way to achieve this is by utilizing the router service.

addNewCustomer(customer) {
    this.dataService.postEntity('customers', customer);
    this.router.navigate(['/customer-home']);
}

However, it may be beneficial to consider using Observables or Promises to reload your data instead of refreshing the entire page, as suggested by others. Below is an example of how you could implement an Observable:

addNewCustomer(customer) {
    this.dataService
        .postEntity('customers', customer)
        .subscribe(
            update => this.customer = update;
            err => console.log(err); 
        )
}

Answer 4

If you are looking to redirect or reload to your customer page, one way to achieve this is by utilizing the router service.

addNewCustomer(customer) {
    this.dataService.postEntity('customers', customer);
    this.router.navigate(['/customer-home']);
}

However, it may be beneficial to consider using Observables or Promises to reload your data instead of refreshing the entire page, as suggested by others. Below is an example of how you could implement an Observable:

addNewCustomer(customer) {
    this.dataService
        .postEntity('customers', customer)
        .subscribe(
            update => this.customer = update;
            err => console.log(err); 
        )
}

Refreshing a page in Angular 4/5 using TypeScript

Answer №1

Answer №2

Similar questions

Component opens MatSnackBar in various styles

What is the best way to refresh a personalized form element using Angular?

What benefits do declaration files offer compared to sources in TypeScript?

Issue with absolute import in React TypeScript application

Manipulate dropdown choices by interacting with the dropdown form control in an Angular application

Collaborate on sharing CSS and TypeScript code between multiple projects to

Delivering an Angular2 application from a base URL using Express

Unexpected behavior: Angular4/Javascript Date object alters when timezone is specified in Date constructor

Tips for implementing assertions within the syntax of destructuring?

Avoid using dot notation with objects and instead use `const` for declaring variables for more

Receiving a Promise<fullfield> as a result

The form will not appear if there is no data bound to it

Angular 2: How to Avoid Exceeding Maximum Call Stack Size with Eager Loading

What is the best way to invoke a method in a child component from its parent, before the child component has been rendered?

I encountered a TypeScript error in React Native when attempting to use "className" with TypeScript

Setting up Typescript error handling for next-auth getProviders configuration

The potential object null may lead to an absence of the 'value' property in the type 'EventTarget'

Utilize the canActivate method to decide when to display a specific hyperlink

Heroku build is reporting that it cannot locate the `@types` in the package.json file

Checkbox selections persist when navigating between pages