How do you pass data from one view to another in Ionic applications?

Technology CommunityCategory: IonicHow do you pass data from one view to another in Ionic applications?
VietMX Staff asked 3 years ago

Ionic v.1 uses AngularJS and UI-router. It means you can use Angular services or UI-router’s state resolve to pass data from one view to another. Since Angular services are singletons, data stored in services can be accessed across other Angular controllers.

As mentioned, UI-router provides a resolve configuration. For example:

$stateProvider
  .state('todos', {
    url: '/todos',
    controller: 'TodosCtrl',
    templateUrl: 'todos.html',
    resolve: {
      todos: function(TodosService) {
        return TodosService.getTodos()
      }
    }
  })

One advantage of resolve over stateful services is better testing: as resolve injects dependencies in the controller, it is easy to test them.

When using Ionic v.4 you have 3 options: 1. Using Query Params (bad) 2. Service and Resolve Function (legit) 3. Using Router Extras State (new since Angular 7.2)

 openDetailsWithState() {
    let navigationExtras: NavigationExtras = {
      state: {
        user: this.user
      }
    };
    this.router.navigate(['details'], navigationExtras);
  }