angular 2.0 mandatory refresh like $apply

Question

I am create an app to drag a component(angular2 component, same below) from a list and drop it into another component. In this process I used interactjs to drag and drop component. But when I drop it into another component, It only load the static html in the component template which dragged.

For example I have this component to be added into another

import {Component, View} from 'angular2/angular2'

@Component{
    selector:"sample"
}

@View{
    template:`<p>static content</p><p>{{contentToBind}}</p>`
}

class Sample{
    contentToBind:string= "I am the binding content."
}

when it added, it should looks like below

static content
I am the binding content.

But actually it just display static content like

static content

You can check this example in this plunker.

And then I bind a click HostListener to this Sample component, when I click the component has been already added into another component, "I am binding content" will appear(other event triggered is same). I think due to interact it has jumped out of angular2's lifecycle.

Any similar method as $apply() in angularJs 1.x?

Answer 1

Interact is not a part of angular 2, maybe your code in Interact is out of angular 2 scope as you said.

You can use NgZone in your Interactjs file in plunker, I edit your code and it's worked now. You should send your event inside of NgZone.

something like this.

myParent.ngZone.run(
    () => {
        console.log("onDrop...");
        ce.drop("Hello");
    }
);

See it on plunker Plunker