Angular.io - reload/refresh component in callback

Question

I am a beginner of the Angular.io.

I created 2 component: "HeaderComponent" act as a page header & "RestaurantComponent" act as a page body.

There is an "Add Restaurant" button in the HeaderComponent, when clicked on it, it will display a form in a lightbox(modal).

The Add Restaurant form will call API when click on the submit button:

this.restaurantService.addRestaurantDetails(newRestaurant)
      .subscribe(restaurant => {
        location.reload(); //this will caused it reload entire page

});

What i need is when i click "Submit" in my form, then refresh the current component(RestaurantComponent in this case). If i am at another component like "DashboardComponent", i would like to refresh the Dashboard component as well.

Additionally, i would like know how to redirect to another component in the callback function as well. E.g. i am at the RestaurantComponent, when i click on the form submit button, i would like to navigate to DashboardComponent.

Thank you in advance!

Minor Threat Minor Threat · Accepted Answer · 2018-01-22T16:18:42

Controls in angular are being updated when their @input parameters are being updated. But you can't update them from another control because it'll cause well-known exception. Instead, you can bind them to a property of a service. The expected design is when all your data is stored in services and input fields on your components are bound to property values of these services. Then, if you modify a property in a service (upon receiving answer from backend, for example), controls whose input fields are bound to respective fields of that service will be updated automatically.

Basically, angular checks @Input field of each active control on each time tick and if it's changed, it requests for redraw.

Angular.io - reload/refresh component in callback

1 Answers