Ionic – How to pass URL params between tabs: A Comprehensive Guide

Why Do We Need to Pass URL Params?

Before we dive into the how-to, let’s quickly discuss why passing URL params is essential in Ionic apps. Imagine you’re building a trip planning app, and you want to allow users to share specific trip itineraries with friends. You’d want to pass the trip ID as a URL param so that when the friend opens the shared link, they can see the exact same trip details. This is just one example, but the use cases are endless!

Understanding the Basics of URL Params in Ionic

In Ionic, URL params are used to pass data from one page to another. They’re appended to the URL as query strings, allowing us to access the data in our pages using the ActivatedRoute service. Let’s break it down:

// Assuming we have a URL like this: /tabs/tab1?param1=value1&param2=value2
import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    console.log(params); // Output: { param1: 'value1', param2: 'value2' }
  });
}

Method 1: Using the Ionic Navigate API

The first method involves using the Ionic Navigate API to pass URL params between tabs. This approach is straightforward and easy to implement:

1. Create a new Ionic tabbed app using the Ionic CLI:

ionic start ionic-tabs tabs

2. In the tabs routing module, add the following code:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        loadChildren: '../tab1/tab1.module#Tab1PageModule',
      },
      {
        path: 'tab2',
        loadChildren: '../tab2/tab2.module#Tab2PageModule',
      },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule { }

3. In the tab1 page, add a button that navigates to tab2 and passes a URL param:

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-tab1',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Tab 1</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-button (click)="navigateToTab2()">Go to Tab 2</ion-button>
    </ion-content>
  `
})
export class Tab1Page {
  constructor(private navCtrl: NavController) { }

  navigateToTab2() {
    this.navCtrl.navigateForward(['tabs', 'tab2', { params: { id: '123' } }]);
  }
}

4. In the tab2 page, access the URL param using the ActivatedRoute:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-tab2',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Tab 2</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <p>Received param: {{ paramId }}</p>
    </ion-content>
  `
})
export class Tab2Page implements OnInit {
  paramId: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.paramId = params.id;
    });
  }
}

Method 2: Using a Shared Service

The second method involves creating a shared service to pass data between tabs. This approach is more flexible and decouples our pages from each other:

1. Create a new service using the Ionic CLI:

ionic g service shared

2. In the shared service, add a property to hold the URL param:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  paramId: string;

  setParamId(id: string) {
    this.paramId = id;
  }

  getParamId() {
    return this.paramId;
  }
}

3. In the tab1 page, inject the SharedService and set the URL param:

import { Component } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-tab1',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Tab 1</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-button (click)="setParamId()">Go to Tab 2</ion-button>
    </ion-content>
  `
})
export class Tab1Page {
  constructor(private sharedService: SharedService) { }

  setParamId() {
    this.sharedService.setParamId('123');
  }
}

4. In the tab2 page, inject the SharedService and access the URL param:

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-tab2',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Tab 2</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <p>Received param: {{ paramId }}</p>
    </ion-content>
  `
})
export class Tab2Page implements OnInit {
  paramId: string;

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.paramId = this.sharedService.getParamId();
  }
}

Conclusion

And there you have it! Two methods for passing URL params between tabs in Ionic. Whether you choose to use the Ionic Navigate API or a shared service, the key takeaway is that passing URL params is a crucial aspect of building robust and user-friendly Ionic apps. By following these steps, you’ll be well on your way to creating a seamless experience for your users.

Method	Pros	Cons
Using the Ionic Navigate API	Easy to implement, tightly coupled to the Ionic framework	Less flexible, may not be suitable for complex use cases
Using a Shared Service	More flexible, decouples pages from each other	Requires more code, may require additional setup

Final Thoughts

Remember, the key to successful Ionic development is understanding the intricacies of the framework and choosing the right approach for your specific use case. Whether you’re building a simple todo list app or a complex enterprise-level application, mastering the art of passing URL params between tabs is essential.

So, which method will you choose? The Ionic Navigate API or a shared service? Let us know in the comments below!

• Share your thoughts on our social media channels!
• Got a question? Ask us in the comments!
• Want to learn more about Ionic development? Check out our tutorials and guides!

Happy coding, and until next time, stay Ionic!

Frequently Asked Question

Got stuck while passing URL params between tabs in Ionic? Don’t worry, we’ve got you covered! Check out these frequently asked questions to find the solution.