How to observe when a view update has been completed based on a model change in Angular 2

Question

I have an ng2 app in which content is being pulled asynchronously from a backend system to inject into a variety of different material based components. In one case, I am trying to create several carousel views from that content.

For example my api responds with something like:

{
categories : [
  {name: "sports", content : [{id: 1, title: "some text", description: "more text"}]
]
}

I will be creating several carousels, one for each category which are using http://materializecss.com/carousel.html, nothing crazy.

The issue I have is there does not seem to be an appropriate lifecycle event to wire into that will let me know my content from that async call has been rendered - resulting in the creation of several carousels in the dom against which I then need to call a jQuery initialization.

What event will let me know when data from my async request has been marshaled into the dom?

Thanks

Answer 1

I think you should look up Angular LifeCycle Hooks.

ngOnChanges() {} It could be helpful, If data is bind to the component (look @Input)

On JSON received, EventEmitter() could be use to emit the $event and then subscribe to it in the component

Answer 2

Try using lifecycleEvent "AfterViewChecked"

export class whateverClass implements AfterViewChecked{
ngAfterViewChecked() {
 //logic goes here 
}
}