{"id":14985826,"url":"https://github.com/servrox/demo-ionic-tabs-back-button","last_synced_at":"2025-04-11T22:11:44.087Z","repository":{"id":121897872,"uuid":"172404546","full_name":"servrox/demo-ionic-tabs-back-button","owner":"servrox","description":"An Ionic 4 project which shows back (and forth) navigation between tabs and 'global' pages.","archived":false,"fork":false,"pushed_at":"2019-03-05T02:13:47.000Z","size":301,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-11T22:11:39.860Z","etag":null,"topics":["angular","ion-back-button","ion-back-button-tabs","ion-tabs","ionic","ionic-4","ionic-framework","ionic4","ionic4-angular7","ionic4-example","ionic4-sample","ionic4-tabs","ionicframework","ionrouteroutlet","lazy-loading","navigation","router","stackcontroller"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/servrox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-24T23:49:33.000Z","updated_at":"2023-04-17T06:51:18.000Z","dependencies_parsed_at":"2023-07-12T05:46:15.015Z","dependency_job_id":null,"html_url":"https://github.com/servrox/demo-ionic-tabs-back-button","commit_stats":{"total_commits":14,"total_committers":2,"mean_commits":7.0,"dds":0.0714285714285714,"last_synced_commit":"6cb11ad65b837b838d4295b9a9f0394596a28353"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/servrox%2Fdemo-ionic-tabs-back-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/servrox%2Fdemo-ionic-tabs-back-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/servrox%2Fdemo-ionic-tabs-back-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/servrox%2Fdemo-ionic-tabs-back-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/servrox","download_url":"https://codeload.github.com/servrox/demo-ionic-tabs-back-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248487692,"owners_count":21112190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","ion-back-button","ion-back-button-tabs","ion-tabs","ionic","ionic-4","ionic-framework","ionic4","ionic4-angular7","ionic4-example","ionic4-sample","ionic4-tabs","ionicframework","ionrouteroutlet","lazy-loading","navigation","router","stackcontroller"],"created_at":"2024-09-24T14:11:44.683Z","updated_at":"2025-04-11T22:11:44.054Z","avatar_url":"https://github.com/servrox.png","language":"TypeScript","readme":"# Demo: Ionic tabs + global pages with `ion-back-button`\nIonic 4 project with a tab based layout and workarounds for the `ion-back-button`.\u003cbr /\u003e\nThe demo shows two ways how to navigate from a tabbed page to a 'global' page and back,\u003cbr /\u003e\n**without losing tab-states**.\u003cbr /\u003e\n\n![Live Demo](http://g.recordit.co/8Lre03MyU6.gif)\n\n## Getting Started\n``` \ngit clone https://github.com/servrox/demo-ionic-tabs-back-button.git\ncd demo-ionic-tabs-back-button\nyarn\nionic serve\n```\n\u003cbr /\u003e\n\n## Solutions shown in demo\n\n[First](#1-passing-previous-page-s-global-page-one) solution is a workaround that overcomes the problem.\u003cbr /\u003e\nThe [second](#2-using-ion-back-button-tabs-component-s-global-page-two) one is a fix which deals directly with the problem\u003cbr /\u003e by using [`ion-back-button-tabs`](https://www.npmjs.com/package/ion-back-button-tabs) a custom ionic 4 component.\u003cbr /\u003e\n\u003cbr /\u003e\n\n\n### 1. Passing previous page *(s. global-page-one)*\n\nThis solution overcomes the problem by using an `ion-button` instead of the `ion-back button`.\u003cbr /\u003e\nTo make it work following steps are necessary:\n1. Get the route you want to navigate back later.\n```\nthis.currentRoute = btoa(this.router.url);\n```\n2. Pass that value to the page called. (url params used here)\n```\n\u003cion-button \n    [routerLink]=\"['/global-page-one', {p: currentRoute}]\"\n    routerDirection=\"forward\"\u003e\n    Global Page One\n\u003c/ion-button\u003e\n```\n3. On the page called check if a route was given\n```\nthis.previousPage = this.route.snapshot.paramMap.get('p') ? atob(this.route.snapshot.paramMap.get('p')) : null;\n```\n4. Use given route when user clicks back\n```\nback() { this.navCtrl.navigateBack(this.previousPage); }\n```\n\u003cbr /\u003e\n\nTo make the `ion-button` look exactly like the `ion-back-button`, you can check which platform is being used.\n\n```\nthis.showText = this.plt.is('ios');\n```\nIf the page with the back-button is the first page called, the real `ion-back-button` can be used. This works because then the defaultHref is taken.\n```\nthis.router.events.subscribe((event: RouterEvent) =\u003e {\n    if (event instanceof NavigationEnd) { \n        this.useRealBackButton = event.id === 1; \n    }\n});\n```\nFinal solution looks like this in template:\n```\n\u003cion-buttons slot=\"start\"\u003e\n    \u003cion-back-button *ngIf=\"useRealBackButton\" \n        [defaultHref]=\"previousPage ? previousPage : '/tabs/tab1'\"\u003e\n    \u003c/ion-back-button\u003e\n    \u003cion-button *ngIf=\"!useRealBackButton\" (click)=\"back()\"\u003e\n        \u003cion-icon name=\"arrow-back\"\u003e\u003c/ion-icon\u003e\n        {{ showText ? 'Back' : null }}\n    \u003c/ion-button\u003e\n\u003c/ion-buttons\u003e\n```\n\u003cbr /\u003e\n\nIn this solution swiping back (iOS gesture) is disabled for the particular page.\n```\nngOnInit() { this.routerOutlet.swipeGesture = !this.plt.is('ios');\n  [...]\nionViewDidLeave() { this.routerOutlet.swipeGesture = this.plt.is('ios'); }\n```\n`ion-back-button-tabs` supports swiping back! *(see below)*\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n### 2. Using [`ion-back-button-tabs`](https://www.npmjs.com/package/ion-back-button-tabs) component *(s. global-page-two)*\n\n1. Install from [npm](https://www.npmjs.com/package/ion-back-button-tabs)\n```\nnpm i ion-back-button-tabs --save\n```\n2. Import `BackButtonTabsModule` to the page module (*global-page-two.module.ts*)\n```\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { Routes, RouterModule } from '@angular/router';\nimport { IonicModule } from '@ionic/angular';\n\nimport { GlobalPageTwoPage } from './global-page-two.page';\n\nimport { BackButtonTabsModule } from 'ion-back-button-tabs';\n\nconst routes: Routes = [\n  {\n    path: '',\n    component: GlobalPageTwoPage\n  }\n];\n\n@NgModule({\n  imports: [\n    CommonModule,\n    FormsModule,\n    IonicModule,\n    RouterModule.forChild(routes),\n    BackButtonTabsModule\n  ],\n  declarations: [GlobalPageTwoPage]\n})\nexport class GlobalPageTwoPageModule { }\n```\n3. Get attributes for `ion-back-button-tabs`\u003cbr /\u003e\n* `tabsPrefix` is the url path set for the TabsPage component *(e.g. 'tabs')*\n```\nimport { NgModule } from '@angular/core';\nimport { RouterModule, Routes } from '@angular/router';\nimport { TabsPage } from './tabs.page';\n\nconst routes: Routes = [\n  {\n    path: 'tabs',\n    component: TabsPage,\n    children: [\n      {\n        path: 'tab1',\n        children: [\n          {\n            path: '',\n            loadChildren: '../tab1/tab1.module#Tab1PageModule'\n          }\n        ]\n      },\n      {\n        path: 'tab2',\n...\n```\n* `tabsPageSelector` is the selector of the TabsPage component *(e.g. 'app-tabs')*\n```\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-tabs',\n  templateUrl: 'tabs.page.html',\n  styleUrls: ['tabs.page.scss']\n})\nexport class TabsPage {}\n\n```\n4. Use `ion-back-button-tabs` in template\n```\n\u003cion-back-button-tabs \n  defaultHref=\"/tabs/tab1\" \n  tabsPrefix=\"tabs\" \n  tabsPageSelector=\"app-tabs\"\u003e\n\u003c/ion-back-button-tabs\u003e\n```\n\u003cbr /\u003e\n\n## Problem explained\n\nWhen navigating from a page inside a tab to a 'global' page,\nthe `ion-back button` will no longer work properly.\u003cbr /\u003e\nMore specifically, the back button no longer navigates to the previously opened page, instead it uses the redirect of the tabs-routing.\u003cbr /\u003e\n\u003cbr /\u003e\nThis happens because the `ion-back-button` [uses](https://github.com/ionic-team/ionic/blob/4646f53ec7ab39a2e89f0c59a427b6b61ea7788e/angular/src/directives/navigation/ion-back-button.ts#L25) only the main-IonRouterOutlet, instead of also checking tabs-IonRouterOutlet.\u003cbr /\u003e\nWhich means that the StackController inside the main-IonRouterOutlet only knows the route of the tabs module (e.g. 'tabs').\u003cbr /\u003e\n^*No guarantee on this*^\u003cbr /\u003e\n\u003cbr /\u003e\nProblem is also described in the official [Bug Report](https://github.com/ionic-team/ionic/issues/15216).\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Built With\n\n* [Ionic CLI](https://ionicframework.com/docs/cli/) - version 4.10.3\n* [Ionic Framework](https://material.angular.io/) - @ionic/angular 4.0.1 \n\n## Authors\n\n* **Marcel Mayer** - \n[servrox.solutions](http://servrox.solutions)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fservrox%2Fdemo-ionic-tabs-back-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fservrox%2Fdemo-ionic-tabs-back-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fservrox%2Fdemo-ionic-tabs-back-button/lists"}