How to manually force a rerender of a component in Angular2?

Question

I am using ng Smarttable and change the datasource array via an event (the change is an id change of a value inside the array). The problem is that angular doesnt detect the changes and nothing happens UNTIL i hover over the page or click somewhere.

So the changes are correctly applied behind the scenes and angular "sees" these changes once i click somewhere.

So i could just manually click alot of times to see the chaning property, but this is not desired.

I tried:

1. using ChangeDetectorRef inside the function where i change the array (markAsChanged & DetectChange)
2. manually making a click event once the array is changed
3. Using Immutability (this.data= [...this.data];)

Is it possible to have something like this?

this.renderer.refresh();

or use just a functionality of ng smartable?

EDIT: it looks like the problem was on my side. When you "refresh" the smarttable,you get a promise which only executes once the loading is finished.

I didnt used the promise. Putting the normal DetectChange() inside the promise made it work

Answer 1

You can manually re-render using application ref.

Inject ApplicationRef to your component.

constructor(appRef: ApplicationRef) {}

Then call tick method whenever you want to re-render

appRef.tick();