0

I am using a 3rd party component that has a public array variable. When the component is first initialized the array has zero length. It it then filled in by some external rest call and each element of the array is rendered as a div in the view. I would like to detect when the rendering of the array elements is finished and do something.

I have tried NgOnChanges but it is never fired when the array changes.

I have also tried NgDoCheck on an IterableDiffers which seems to be fired before and after the array changed, i.e. before and after the array elements have been rendered.

I imagine this sort of thing should be possible?

In my component I reference the 3rd part omponent like

@ViewChild("acontainer") tablec: TableComponent;

This component then has an array which I can access with

this.tablec.dataArray

it is this array that I want to monitor.

JennyToy
  • 588
  • 4
  • 19
  • Would you please show your code that contains the array and how you are attempting to detect the changes? – Narm Mar 15 '18 at 15:12
  • It is similar to the example in https://stackoverflow.com/questions/42962394/angular-2-how-to-detect-changes-in-an-array-input-property. I also added how I access the 3rd part component in my question. – JennyToy Mar 15 '18 at 15:21
  • 1
    If the component doesn't implement some type of Observable for the array or rest call. You might be able to use `MutationObserver`. – Hoyen Mar 15 '18 at 16:31

1 Answers1

0

You will have to re-assign the array to create changes.

For example when you do an update set the array to a new array and then set your value.

For example

updateArr(value) {
  this.arr = [];
  this.arr = value;
}

Edit: Can you try creating the ViewChild to being a setter, it should be called on update

 private _element: ElementRef;

 @ViewChild('element') set element(el: ElementRef) {
    this._element = el;
 }
Jmsdb
  • 515
  • 3
  • 9
  • I dont update the array. The 3rd part component does it by calling a rest endpoint. – JennyToy Mar 15 '18 at 15:09
  • Then NgDoCheck is the correct place, you will have to do the work yourself to detect if it is actually a change. – Jmsdb Mar 15 '18 at 15:11
  • Thanks. I tried the approach in the link but it seems NgDoCheck is being continuously being called (I put a console.log and the output doesnt stop). Probably other changes are triggering NgDoCheck not just the array change. I thought there would be some way of just listening for changes in the array not everything in the view. – JennyToy Mar 15 '18 at 15:18
  • As Narm asked, maybe you can give us the code in which you are doing the array update? Would be easier to understand what can be done :) – Jmsdb Mar 15 '18 at 15:20
  • Where would I add the code I want to add? To the setter? I imagine when the setter executes the component has finished rendering? – JennyToy Mar 15 '18 at 15:40
  • 1
    Sorry, I feel that I have misunderstood the question, using the setter for the @ViewChild only triggers after NgAfterViewInit. However, If I am correct, you need to know when rendering has finished after the component has already loaded. For that, I would then go back to my first suggestion: NgDoCheck, or another is to control the changeDetectionCycle yourself. This is because soon, as you make the update the render will happen. – Jmsdb Mar 15 '18 at 15:48