Automatically hide popup after 2 seconds

[KM]

Hi,

I have 2 popups in 2D view. I want the first popup to be shown after step 1 finished playing, and then the popup will be hidden automatically after 2 seconds. Then, the second popup appear after first popup hidden. 

How can I do this? 

Thanks

[ClayHelberg]

You can use $scope.$on() to listen for the end of a step, check that it's the right step, and then do your popup handling. An example might look something like this:

// typed off the cuff, debugging is left as an exercise for the reader..

$scope.$on('stepcompleted', ()=> {
  // make sure it's the right step
  if ($scope.getWidgetProp('model-1','currentStep')==1) {
    // show the first popup immediately
    $scope.app.fn.triggerWidgetService('popup-1', 'showpopup');
    // use timeouts to close first popup and open second one
    $timeout(()=>{ $scope.app.fn.triggerWidgetService('popup-1','hidepopup')}, 2000);
    $timeout(()=>{ $scope.app.fn.triggerWidgetService('popup-2','showpopup')}, 2000);
    // if you want to hide the second popup after some delay, add another timeout
    // here, where the timeout value is the desired time for popup-2 plus 2000 for the
    // first timeout
  }
});