Angular 2 Transitions Events
Posted By : Milind Ahuja | 20-Sep-2017
In the newer version of AngularJS, the $state change events are deprecated and have been replaced with $transitions. Navigating from one state to another state means transitioning from the current state to the new or even previous state. This object contains all the contextual information about to and from states, parameters and resolves. It also has the information about the entire states which are being visited and exited as a result of the transition.
Following is the example to show $transitions injection and it's use:
MyCtrl.$inject = ['$transitions'];
function MyCtrl($transitions) {
$transitions.onSuccess({}, function($transition){
console.log($transition.$from());
console.log($transition.$to());
});
}
Following are the available events:
$transitions.onStart({}, function($transition){...});
$transitions.onExit({exiting: "stateName"}, function($transition){...});
$transitions.onRetain({}, function($transition){...});
$transitions.onEnter({entering: "stateName"}, function($transition){...});
$transitions.onFinish({}, function($transition){...});
$transitions.onSuccess({}, function($transition){...});
For more event method in details : https://ui-router.github.io/ng2/docs/latest/classes/transition.transition-1.html
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Milind Ahuja
Milind is a bright Lead Frontend Developer and have knowledge of HTML, CSS, JavaScript, AngularJS, Angular 2+ Versions and photoshop. His hobbies are learning new computer techniques, fitness and interest in different languages.