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:

using ChangeDetectorRef inside the function where i change the array (markAsChanged & DetectChange)
manually making a click event once the array is changed
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

Have you tried immutability ? When you change the datasource for example you have a `data` array try writing this line in your event listener: `this.data = [...this.data]`. — Mehdi Benmoha, Mar 18 '19 at 10:25
Can you post a snippet of your code here or on Stackblitz and tell us the current and desired behaviors? — TheLebDev, Mar 18 '19 at 10:30
unfortunately i dont think this is possible since its code from work — Loading, Mar 18 '19 at 10:32
Have you tried the ng2-smarttable refresh method: https://github.com/akveo/ng2-smart-table/issues/109# or look at their documentation — Mehdi Benmoha, Mar 18 '19 at 10:43
yes, but the problem was on my side. Look at the edit for the solution — Loading, Mar 18 '19 at 10:47

score 8 · Accepted Answer · answered Mar 18 '19 at 10:40

8

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();

answered Mar 18 '19 at 10:40

Dulanjaya Tennekoon

2,408
1
18
31

1

For an library specific solution, check on this thread. https://github.com/akveo/ng2-smart-table/issues/718 – Dulanjaya Tennekoon Mar 18 '19 at 10:44
@Loading great. But for the question you asked, how to do a manual re-rendering, this is the answer. – Dulanjaya Tennekoon Mar 18 '19 at 11:03
1

This is brilliant! Nice and short. Thanks a lot! – Nexonus Nov 13 '20 at 11:39

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

1 Answers1