CODEWITHSUNDEEP
angularangular-templateng2-smart-table
Loading
Loading

Reputation: 1110

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

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

Upvotes: 5

Views: 13317

Answers (1)

Dulanjaya Tennekoon
Dulanjaya Tennekoon

Reputation: 2508

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

Upvotes: 9

Related Questions