Refresh the parent component view in Angular 4

Question

I have got 2 components, let's say, Component A is a list view and Component B is a details view. Each row from the list view is clickable and will redirect to Component B upon clicking.

Component B allows editing and saving the details. I have added a Back button to Component B to allow me to go back to the list view.

But the problem I am having is that I can't see the updated list view and have to manually refresh the browser, and then I can see the updated list there.

I have tried directly using window.location and it works but really I don't prefer this approach.

public back() {
   window.location.assign('/listview');
}

I wonder if there's any better way to solve this problem?

Update:

public onSelected(model: MyModel) {
    const detailsViewUrl = `/detailsview/${model.id}`;
    this._router.navigateByUrl(detailsViewUrl );
  }

Be careful with your words : is `A` the *parent* of `B`, or are the two components routed ? — , May 15 '18 at 09:42
@JoshuaChan I've updated the question to show how ID gets passed to the details view, i.e. component `B` — woodykiddy, May 15 '18 at 10:14
just called the list view again internally and hit db so updated values will be displayed the list view — Karthic G, May 15 '18 at 11:19
this is not angularjs, I'm working on very large scale angular application for the past year and not once did I need to trigger detection manually. if change detection isn't triggering you're probably not doing stuff the 'angular way' - please post a live example, it'll be easy to spot the issue. — Stavm, May 15 '18 at 12:57

score 1 · Answer 1 · answered May 15 '18 at 12:55

You can just emit an @Output EventEmitter with a method on Parent that looks in the event for a change with a variable stored in the component like this:

@Output someOutput: EventEmitter = new Event Emitter<any>;

HTML:

  <b-component (someOutput)=getOutput($event)></b-component>

AComponent:

 getOut(event){
     let output = event;
     if(this.something != output){
          this.ngOnDestroy(); // or something that you can use to make it
    }

That should work as intended.

score 0 · Answer 2 · answered May 15 '18 at 10:00

It sounds like this is an issue with Angular's change detection when changing the contents of an array. See here:

Angular 2: How to detect changes in an array? (@input property)

The solutions in this questions should work but an easy way I have used in the past to force changes in an array to be recognised by Angular is to reassign the array after making the changes:

myArray = [...myArray];

score 0 · Answer 3 · answered May 15 '18 at 10:02

0

use following routing fuction on back button click

public back() {
   this._router.navigateByUrl('/listview')
}
or
public back() {
   this._router.navigate('/listview')
}

answered May 15 '18 at 10:02

mittal bhatt

955
6
13

score 0 · Answer 4 · answered May 15 '18 at 11:23

0

Try this,

Just called the list view again internally and hit db at same time so updated values will be displayed in the list view.

calling the route by using below:

this.router.navigate(['/listview']);

answered May 15 '18 at 11:23

Karthic G

1,162
1
14
31

score 0 · Answer 5 · answered May 15 '18 at 11:45

Seems like a change detection issue, there are some ways to manually trigger change detection like so:

Inject ChangeDetectorRef.

Call it when you go back like so:

public back() {
   ChangeDetectorRef.detectChanges()
}

Refer to this: Triggering change detection manually in Angular

Refresh the parent component view in Angular 4

5 Answers5