Angular 2 how to refresh forms after http post

Question

I am rather new in Angular and my problem is: I have main component which have some child components like form component, tab component, status component.

On main component init I do a request for data (let's say i subscribe it to Object1). This date are used in forms, and status component.

But I have a tab component where i have on it's init another request (let's say Object2). On this component i have a button which runs http post (updating Object2) and on backend side it change one value from Object1 (status value in status component).

How i can reload all main component to see that Object1 is changed after succes on http post in tab component?

Daniel Cooke Daniel Cooke · Accepted Answer · 2017-05-22T10:56:50

On main component init I do a request for data (let's say i subscribe it to Object1). This date are used in forms, and status component.

Use Outputs to call this method again.

Basically you just need to make your data request again.

E.g Component 2 Post button

@Output() refresh = new EventEmitter();
post(){
   //make http.post request
   .subscribe(
     res => console.log(res), 
     err => console.error(err), 
     () => this.refresh.emit();
 )

}

Component 1 that needs to refresh - template

<component-2 (refresh)="getData()"></component-2>

Where getData() = the same method you used to request data the first time.

Angular 2 how to refresh forms after http post

1 Answers