{"id":14985825,"url":"https://github.com/servrox/ion-back-button-tabs","last_synced_at":"2025-06-12T09:37:10.552Z","repository":{"id":57275827,"uuid":"173397823","full_name":"servrox/ion-back-button-tabs","owner":"servrox","description":"Advanced ion-back-button component.","archived":false,"fork":false,"pushed_at":"2019-03-06T13:49:30.000Z","size":12,"stargazers_count":7,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-28T01:45:13.479Z","etag":null,"topics":["angular","ion-back-button","ion-back-button-tabs","ion-tabs","ionic","ionic-4","ionic-framework","ionic4","ionic4-angular7","ionic4-tabs","ionicframework","ionrouteroutlet","lazy-loading","navigation","router","stackcontroller"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ion-back-button-tabs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","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":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-02T03:18:20.000Z","updated_at":"2021-02-16T10:39:04.000Z","dependencies_parsed_at":"2022-08-25T00:11:36.855Z","dependency_job_id":null,"html_url":"https://github.com/servrox/ion-back-button-tabs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/servrox%2Fion-back-button-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/servrox%2Fion-back-button-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/servrox%2Fion-back-button-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/servrox%2Fion-back-button-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/servrox","download_url":"https://codeload.github.com/servrox/ion-back-button-tabs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/servrox%2Fion-back-button-tabs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":258649172,"owners_count":22735793,"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-tabs","ionicframework","ionrouteroutlet","lazy-loading","navigation","router","stackcontroller"],"created_at":"2024-09-24T14:11:44.620Z","updated_at":"2025-06-12T09:37:10.512Z","avatar_url":"https://github.com/servrox.png","language":"TypeScript","readme":"# Advanced `ion-back-button` component \n\nUse the `ion-back-button-tabs` component instead of [`ion-back-button`](https://ionicframework.com/docs/api/back-button)\u003cbr /\u003e when you got trouble navigating from a *tabbed-page* to a *global-page* and back.\u003cbr /\u003e\n\u003cbr /\u003e\n![Live Demo](http://g.recordit.co/8Lre03MyU6.gif)\n\u003cbr /\u003e\n\u003cbr /\u003e\nFor a complete [*demo project*](https://github.com/servrox/demo-ionic-tabs-back-button#getting-started), an [*alternative workaround*](https://github.com/servrox/demo-ionic-tabs-back-button#1-passing-previous-page-s-global-page-one) and a [*problem description*](https://github.com/servrox/demo-ionic-tabs-back-button#problem-explained) look [here](https://github.com/servrox/demo-ionic-tabs-back-button).\n\n## Getting Started\n\n### 1. Install \n```\nnpm i ion-back-button-tabs --save\n```\n### 2. Import `BackButtonTabsModule` to your page module (*shortened here*)\n```\nimport { BackButtonTabsModule } from 'ion-back-button-tabs';\n\n@NgModule({\n  imports: [BackButtonTabsModule]\n})\n```\n### 3. 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```\n### 4. Use `ion-back-button-tabs` in template\n```\n\u003cion-header\u003e\n  \u003cion-toolbar\u003e\n    \u003cion-buttons slot=\"start\"\u003e\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    \u003c/ion-buttons\u003e\n    \u003cion-title\u003eGlobal Page\u003c/ion-title\u003e\n  \u003c/ion-toolbar\u003e\n\u003c/ion-header\u003e\n```\n\u003cbr /\u003e\n\n## How it works\n\n`ion-back-button-tabs` uses the [`ion-back-button`](https://ionicframework.com/docs/api/back-button) internally.\u003cbr /\u003e\nThere are two attributes added (*tabsPrefix* + *tabsPageSelector*)\u003cbr /\u003e\nwhich are used in the also added directive (*ionBackButtonTabs*).\n```\n\u003cion-back-button\n    [defaultHref]=\"defaultHref\"\n    [tabsPrefix]=\"tabsPrefix\"\n    [tabsPageSelector]=\"tabsPageSelector\"\n    ionBackButtonTabs\u003e\n\u003c/ion-back-button\u003e\n```\nThe *ionBackButtonTabs* directive looks pretty much the same as the [`ion-back-button` directive](https://github.com/ionic-team/ionic/blob/4646f53ec7ab39a2e89f0c59a427b6b61ea7788e/angular/src/directives/navigation/ion-back-button.ts), \nexcept that it takes the correct route when navigating from a *global-page* to a *tabbed-page*.\u003cbr /\u003e\n\u003cbr /\u003e\nThis means that it's first checked with the help of the [*tabsPrefix*](#tabsprefix-is-the-url-path-set-for-the-tabsPage-component-eg-tabs) if  to navigate back to a *tabbed-page*. \nIf this is the case, the last active *tab-route* is determined with the help of the [*tabsPageSelector*](#tabspageselector-is-the-selector-of-the-tabspage-component-eg-app-tabs).\u003cbr /\u003e\n\u003cbr /\u003e\nFor the determination, the [*StackController*](https://github.com/ionic-team/ionic/blob/v4.0.2/angular/src/directives/navigation/stack-controller.ts) of the [`ion-tabs`](https://ionicframework.com/docs/api/tabs) component view, which is located in the component view of the specified [*tabsPageSelector*](#tabspageselector-is-the-selector-of-the-tabspage-component-eg-app-tabs), is taken.\u003cbr /\u003e\n\u003cbr /\u003e\nNevertheless, this is not a complete clean solution because currently private attributes of the current *IonRouterOutlet* are used. The [*location*](https://github.com/ionic-team/ionic/blob/v4.0.2/angular/src/directives/navigation/ion-router-outlet.ts#L48) attribute to get the current *ViewContainerRef*, which is needed to find the component views. And some more to support swipe gestures. \u003cbr /\u003e\n\u003cbr /\u003e\n\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details\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%2Fion-back-button-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fservrox%2Fion-back-button-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fservrox%2Fion-back-button-tabs/lists"}