I am using ionic - angular application, where I created a separte tabs page as follows:
tabs.ts
// all imports are made
#Component({
templateUrl: 'tabs.html'
})
export class MyTabs {
tab1Root = 'AlarmPage'; // made ionic page. so deeplink is already created.
tab2Root = 'FormsPage'; // same as above comment.
constructor() {
}
}
tabs.html
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="AlarmPage" tabIcon="alarm"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="FormsPage" tabIcon="information-circle"></ion-tab>
</ion-tabs>
AlarmPage.ts
// all imports are done
// Its an ionic page with deeplink
#IonicPage({
segment: alarm/:id
})
The url for alarm page is http://localhost:8100/#/tab-0/alarm/5aba3.
Issue: When navigatng this page from inside the app i.e from other pages the tabs page is visibe at the bottom, but when pasting this url in the browser's address bar the alarm page is visible with the same url but the Tabs page is not visible.
I want to make visible the Tabs page when accessing this page outside the app i.e pasting the url in the address bar of the browser.
Also when I refresh the page I can see the tabs for some time and then again the tabs become invisible.
Related
I am working in my Ionic 4 app and I have added a back button in my toolbar and I want to show the back button only on some particular pages.
This is app.component.html:
<ion-back-button class="btnmy11" defaultHref="/"></ion-back-button>
I want to show the back button only on some particular pages.
I have added the CSS for displaying the back button on some particular pages but it is not working.
I have also added the [hidden]="menuIsHidden" and make it false by default and true on some particular pages but this is also not working.
Any help is much appreciated.
Create a page by executing the following command:
ionic generate page SharedToolbar
Then inside that page use the #Input() directive, example:
html:
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<div *ngIf="showBackButton== 'true'">
<ion-back-button></ion-back-button>
</div>
</ion-buttons>
typescript:
#Component({
selector : 'shared-toolbar',
templateUrl : './shared-toolbar.page.html',
styleUrls : ['./shared-toolbar.page.scss'],
})
export class SharedToolbar implements OnInit
{
#Input() showBackButton: string = 'false';
constructor() { }
ngOnInit(){}
}
Then in any page you create, you can add the following in the html:
<shared-toolbar showBackButton="true"></shared-toolbar>
and send the following attribute as above to show the back button.
Note:
In the module of each page you might have to add the following:
schemas : [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
to be able to use a template URL of a specific page.
more info here:
https://angular.io/guide/attribute-directives#pass-values-into-the-directive-with-an-input-data-binding
You can create a css class such as:
.back-hide {
display: none;
}
And then use a ngClass on the back button that applies the style if needed.
<ion-back-button class="btnmy11" defaultHref="/" [ngClass]="{'back-hide': menuIsHidden==true}"></ion-back-button>
where you want to show back button you can use ion-nav instead use of ion-toolbar.
By default ion-nav animates transition between pages based in the mode (ios or material design).
I have these tabs at the bottom of my app
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="cloud-upload"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"> . </ion-tab>
</ion-tabs>
This works, if I click on the About tab, it navigates to that page and highlights that tab in the footer on which I just clicked.
But now I would like to have a button in my Home component which activates (moves to) the 'About' tab the same way as I just described above. At first this seems easy, something like
gotoAbout(): void {
this.navCtrl.push(AboutPage)
// or this.navCtrl.setRoot(AboutPage)
}
The this.navCtrl.push creates a back button in the header, which is not what I want, I don't need a stack, I simply want to go to the other tab.
So the this.navCtrl.setRoot(AboutPage) seems to work better, but none of them highlight the tab in the footer. How can I achieve this ?
When i make hide-nav-bar="true" it also makes my sidebar menu disappear in the other pages i didnt wanted to. I just want to make the nav and side menu go away in the home page, but in the other pages my side menu is replaced for a back arrow for some reason. how can i solve this?
This is how it looks
This is how it is supposed to be
My code
<ion-view hide-nav-bar="true" title="Home" id="page1">
<ion-content padding="true" class="has-header backg">
<img class="log" src='../../img/image2.png' alt="HTML5 Icon" style="width:90px;height:90px;">
</ion-content>
</ion-view>
Please take a look at this plunker.
I just want to make the nav and side menu go away in the home page
In order to do that, you can, first, avoid including a header in your view. By just including and ion-content element in your home page html code, that view is not gonna have a navbar.
<ion-content>
<p>Home page</p>
<!-- ... -->
<!-- ... -->
</ion-content>
Even though we're not showing the navbar, the user could open the side menu by slicing it from the left (in this case) so we need to make sure to avoid that from happening like this:
Add an id to the ion-menu element like this:
<ion-menu [content]="content" side="left" id="menu">
<ion-toolbar secondary>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item menuClose="menu" detail-none>
Close Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
And then in your HomePage.ts disable it like this:
import { MenuController, ... } from 'ionic-angular';
#Component({
templateUrl:"home.html"
})
export class HomePage {
constructor(private menuCtrl: MenuController, ...) { }
ionViewDidEnter() {
this.menuCtrl.enable(false, 'menu');
}
// ...
}
in the other pages my side menu is replaced for a back arrow for some
reason.
That's related to the navigation array and how Ionic2 handles it. If you push a new page, that back arrow will be shown. Even though you can hide it, if the app is being run in an android device with a physical back button, the user will still be able togo back to the home page. If you don't want to let the user go back to the HomePage (because is the login page or something like that) use the setRoot method instead.
this.nav.setRoot(NewPage);
When navigating from one page to another, Ionic automatically display back button at the navigation bar. However, there are certain case where ionic don't display the back button. For example, when you navigate from a tab page to a none tab page.
How can I force Ionic to display back button on certain page?
Javascript:
.state('app.tab.playlists', { //<!-- Tab content page
url: '/playlists',
views: {
'tab-Content': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.singer', { //<!-- Not tab content page (if you navigate from tab page to this page, back button will not displayed)
url: '/singer',
views: {
'menuContent': {
templateUrl: 'templates/singer.html'
}
}
})
You can tell it in your controller. Try:
.controller('yourCtrl', function($scope) {
$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
viewData.enableBack = true;
});
})
But like LeftyX said. The history function for tab to non tab view is buggy.
Ionic manages a history while you're navigating from one view to the other.
$ionicHistory keeps track of views as the user navigates through an
app. Similar to the way a browser behaves, an Ionic app is able to
keep track of the previous view, the current view, and the forward
view (if there is one). However, a typical web browser only keeps
track of one history stack in a linear fashion.
Unlike a traditional browser environment, apps and webapps have
parallel independent histories, such as with tabs. Should a user
navigate few pages deep on one tab, and then switch to a new tab and
back, the back button relates not to the previous tab, but to the
previous pages visited within that tab.
There's a bug open on github which hasn't been fixed yet (and will only be fixed in 2.0) where Adam Bradley states:
The back button does not display because when you go into a tab, it
enter's it own "history", meaning each tab has its own navigation back
and forward.
So, basically, when you move from tabs to regular view you're going to lose the back button.
What you can do is to create one yourself:
<ion-nav-buttons side="left">
<button class="button back-button buttons button-clear header-item" ng-click="goBack()">
<i class="icon ion-ios-arrow-back"> Back</i>
</button>
</ion-nav-buttons>
and place it inside your view:
<ion-view view-title="home">
<ion-nav-buttons side="left">
<button class="button back-button buttons button-clear header-item" ng-click="goBack()">
<i class="icon ion-ios-arrow-back"> Back</i>
</button>
</ion-nav-buttons>
<ion-content padding='true' scroll='false' has-footer='false'>
<div class="card">
<div class="item item-text-wrap">
HOME PAGE
</div>
</div>
</ion-content>
</ion-view>
As you can see I've used ng-click="goBack()" for the button.
In your controller you simply would:
$scope.goBack = function(){
$ionicHistory.goBack();
}
don't forget to inject $ionicHistory in your controller.
PS: This is a over-simplified solution as it does not check if the history has got a backview:
$ionicHistory.viewHistory().backView
Add follwing lines inside your
<ion-navbar hideBackButton="true">
<button (click)="back()" class="back-button disable-hover bar-button bar-button-ios back-button-ios bar-button-default bar-button-default-ios show-back-button" ion-button="bar-button" ng-reflect-klass="back-button" ng-reflect-ng-class="back-button-ios" style=""><span class="button-inner"><ion-icon class="back-button-icon icon icon-ios back-button-icon-ios ion-ios-arrow-back" role="img" ng-reflect-klass="back-button-icon" ng-reflect-ng-class="back-button-icon-ios" aria-label="arrow back" ng-reflect-name="ios-arrow-back"></ion-icon><span class="back-button-text back-button-text-ios" ng-reflect-klass="back-button-text" ng-reflect-ng-class="back-button-text-ios">Back</span></span><div class="button-effect"></div></button>
I use Ionic Framework and I'm using tabs as main navigation. I have the following HTML
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Home Tab -->
<ion-tab title="Home" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/home">
<ion-nav-view name="tab-home"></ion-nav-view>
</ion-tab>
<!-- what if I want to add 9 more tabs here? -->
</ion-tabs>
What if I want to have 10 tabs? Then I want the default iOS behaviour, which is to show 4 first tabs, a "More" tab, which upon click, shows the rest of the tabs in a list.
Is this possible in ionic?
Currently, not possible be default. One could either write a plugin to add this functionality, but the framework it self does not have it baked in.