ReactComponent | @uirouter/react
  • Public
  • Public/Protected
  • All

Interface ReactComponent

The shape of a controller for a view (and/or component), defining the controller callbacks.

A view in UI-Router is comprised of either a component ([[Ng2ViewDeclaration.component]]) or a combination of a template (or templateProvider) and a controller (or controllerProvider).

The controller object (or the component's controller object) can define component-level controller callbacks, which UI-Router will call at the appropriate times. These callbacks are similar to Transition Hooks (IHookRegistry), but are only called if the view is currently active.

This interface defines the UI-Router component callbacks.

TODO: this should extend the ng2 Component interface


  • ReactComponent




  • uiCanExit(): any
  • This callback is called when the view's state is about to be exited.

    This callback is used to inform a view that it is about to be exited, due to a new Transition. The callback can ask for user confirmation, and cancel or alter the new Transition. The callback should return a value, or a promise for a value. If a promise is returned, the new Transition waits until the promise settles.

    Called when:

    • The view is still active
    • A new Transition is about to run
    • The new Transition will exit the view's state

    Called with:

    • This callback is injected in the new Transition's context

    Relevant return Values:

    • false: The transition is cancelled.
    • A rejected promise: The transition is cancelled.
    • TargetState: The transition is redirected to the new target state.
    • Anything else: the transition will continue normally (the state and view will be deactivated)

    Returns any

    a value, or a promise for a value.


  • uiOnParamsChanged(newValues: any, $transition$: Transition): any
  • This callback is called when parameter values have changed.

    This callback can be used to respond to changing parameter values in the current state, or in parent/child states. This callback is especially handy when using dynamic parameters (ParamDeclaration.dynamic)

    Called when:

    • The view is still active
    • A new transition has completed successfully
    • The state for the view (controller) was not reloaded
    • At least one parameter value was changed

    Called with:


    • newValues: any

      an object containing the changed parameter values

    • $transition$: Transition

      the new Transition which triggered this callback


      angular.module('foo').controller('FancyCtrl', function() {
        this.uiOnParamsChanged = function(newParams) {
          console.log("new params: ", newParams);

    Returns any

Generated using TypeDoc