How can I execute the code only after my opinion has changed (with its ngFors, etc.)?

Question

I am trying to implement a MagnificPopup solution on an image page. Since they are displayed via * ngFor, the code for initializing pop-up functions is run before the images are displayed.

Is there a way to run the code only when the view has finished rendering (or, even better, the contents of the view have changed)? I saw ways to execute code when the @Inputs component changes, but not when its internal methods do.

Answer 1

There is currently no built-in support.

You can create your own internal fields that are *ngFor tied to setters and calling methods when changing them.

Using

 set someValue(newValue) { this._someValue = newValue; setTimeout(() => afterValueChanged(),10); } 

you should delay the execution of afterValueChanged() enough for Angular performing the DOM update. Thus, afterValueChanged() will be highlighted in the event queue, and Angular should be executed when this scheduled event queue task is executed.

Answer 2

Solution (at least as far as I can tell): ngAfterViewInit.

 import {Component, AfterViewInit} from 'angular2/core'; export class Gallery implements AfterViewInit { ngAfterViewInit() { $('.gallery')['magnificPopup']({ delegate: 'a', type: 'image', gallery: { enabled: true } }); } } 

Obviously, the independent parts of the class are ignored. The square bracket designation calling the method in ngAfterViewInit is necessary because the TS compiler complains about missing properties (true at compile time, but not at run time) when using dot notation.