How to listen to broadcasted event from angular components into Vue component? about ngvue

[jaredmcateer]

In your angular code you'd have something like

scope.$broadcast('some-event', payload);

Then in the controller that encapsulates your vue component you'd have something like

scope.$on('some-event', (payload) => scope.payload = payload);
//or if you're using controllerAs and a class syntax
scope.$on('some-event', (payload) => this.payload = payload);

and in your template

<my-vue-component v-props-some-property="payload"></my-vue-component>
// or <div ng-controller="myCtrl as $ctrl>...
<my-vue-component v-props-some-property="$ctrl.payload"></my-vue-component>

If there is no "payload" associated with the event you could just make it a timestamp

scope.$on('some-event', () => scope.payload = Date.now());

And that would trigger an update in your vue component. If you need more or this isn't quite what you mean, I'm going to need a minimal test case of what you're trying to do to better help you. Good luck!

[gopal4chavan]

This is exactly what I wanted, Thanks a lot @jaredmcateer

[jaredmcateer]

You're going to have to assign a property in the angular scope that you can pass as a prop to the component. Or setup a reactive store such as Vuex and dispatch an action from an angular controller that is listening to the event that updates state the component can react to.

[gopal4chavan]

Thanks for the reply @jaredmcateer , could you elaborate a little on the 1st option