I am trying to implement a feature similar to whats available in Facebook i.e. if you have scrolled the news feed, pressing hardware back button takes you to the top of the list.
For this I think believe canDeactivate of Router Guards would be the proper ways.
But I am unable to find a way to check if the page has been scrolled or not.
I have tried window.pageYOffset but this always returns 0, accessing ViewChild within a Guard always returns null.
Can anyone please guide how to achieve this?
There are two approaches for this that should help you.
First, starting with Ionic 4, you can register you back button handler using the Platform features:
https://www.freakyjolly.com/ionic-4-overridden-back-press-event-and-show-exit-confirm-on-application-close/
this.platform.backButton.subscribeWithPriority(999990, () => {
//alert("back pressed");
});
Secondly, you can use more features of Ionic 4 called scrollEvents.
I have explained how to use this feature in other answers:
How to detect if ion-content has a scrollbar?
How to detect scroll reached end in ion-content component of Ionic 4?
ionic 4 - scroll to an x,y coordinate on my webView using typeScript
Hopefully that will get you moving in the right direction.
I think that last answer should solve most of your issue, so something like this:
Freaky Jolly has a tutorial explaining how to scroll to an X/Y coord.
First, you need scrollEvents on the ion-content:
<ion-header>
<ion-toolbar>
<ion-title>
Ion Content Scroll
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [scrollEvents]="true">
<!-- your content in here -->
</ion-content>
In the code you need to use a #ViewChild to get a code reference to the ion-content then you can use its ScrollToPoint() api:
import { Component, ViewChild } from '#angular/core';
import { Platform, IonContent } from '#ionic/angular';
#Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
// This property will save the callback which we can unsubscribe when we leave this view
public unsubscribeBackEvent: any;
#ViewChild(IonContent) content: IonContent;
constructor(
private platform: Platform
) { }
//Called when view is loaded as ionViewDidLoad() removed from Ionic v4
ngOnInit(){
this.initializeBackButtonCustomHandler();
}
//Called when view is left
ionViewWillLeave() {
// Unregister the custom back button action for this page
this.unsubscribeBackEvent && this.unsubscribeBackEvent();
}
initializeBackButtonCustomHandler(): void {
this.unsubscribeBackEvent = this.platform.backButton.subscribeWithPriority(999999, () => {
this.content.scrollToPoint(0,0,1500);
});
/* here priority 101 will be greater then 100
if we have registerBackButtonAction in app.component.ts */
}
}
Related
good morning. Does anyone know the import of the NavController? I am looking at the docs of Ionic 4 docs and it says there is a method of getPrevious() however when I do:
import { NavController } from ‘#Ionic/angular’;
contructor (private navCtrl: NavController){}
private func(): void{
this.navCtrl.getPrevious();
}
I get an error saying property getPrevious does not exist on type NavController however in the docs it says that it exists. anyone aware of the proper import since it isn't documented?
previously you were able to do this with Ionic 2-3 but not Ionic 4.
side note* method last() doesn't exist either.
What do you want to do? If you want to go back, than you could use the ion-back-button.
<ion-buttons slot="start">
<ion-back-button color="light"></ion-back-button>
</ion-buttons>
Also you can use the NavController like this to get forward:
constructor(private navCtrl: NavController) { }
GotoImpressum() {
this.navCtrl.navigateForward('impressum');
}
There is some components in Ionic that do not provide an event that is emitted when focus is lost.
For example ion-input provides ionBlur. On the other hand there is other elements like ion-content where I need to detect an outside click, but without knowing which event to use.
Is there a way to achieve that without being limited to the proposed events in the documentation?
I found this article that shows a way to use a custom directive to detect an outside click:
import {Directive, ElementRef, Output, EventEmitter, HostListener} from '#angular/core';
#Directive({
selector: '[clickOutside]'
})
export class ClickOutsideDirective {
constructor(private _elementRef : ElementRef) {
}
#Output()
public clickOutside = new EventEmitter();
#HostListener('document:click', ['$event.target'])
public onClick(targetElement) {
const clickedInside = this._elementRef.nativeElement.contains(targetElement);
if (!clickedInside) {
this.clickOutside.emit(null);
}
}
}
The directive can then be used this way, after declaring it in the concerned module:
<!-- HTML Template -->
<ion-content (clickOutside)="handleOutsideClick()"><!-- ... --></ion-content>
<!-- Typescript code -->
handleOutsideClick() {
//Handle My outside Click
}
Yeah, It's been 7 months since asked.
Stucked with the same issue; this solved the issue
TS
#ViewChild('content') content: ElementRef
#HostListener('document:click', ['$event'])
andClickEvent(event) {
if (!this.content.nativeElement.contains(event.target)) {
if (!this.navCtrl.isTransitioning() && this.navCtrl.getActive()) {
this.close()
}
}
}
HTML
<ion-content #content>
I created a page with an iframe. The url that the iframe will render has some input fields. When I type something, it reload all the page and I can do nothing.
View
<ion-content no-padding>
<iframe [src]="urlpaste()"></iframe>
</ion-content>
Controller
import { Component } from '#angular/core';
import { DomSanitizer } from '#angular/platform-browser';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
my_url: any;
constructor(private sanitize: DomSanitizer) {}
urlpaste(){
this.my_url = "http://example.com/";
return this.sanitize.bypassSecurityTrustResourceUrl(this.my_url);
}
}
It looks like this may have to do with the resize event(s) generated from clicking into the input field, in which case a zoom in happens or the on-screen keyboard pushes the form up. See this:
Ionic 2 Form goes up when keyboard shows
I'm working on Ionic App, I want to hide navbar and tabs on scroll down and show them on scroll up.
Anyone know how to do this? Please help.
Thanks in advance.
a very naive implementation would be:
add a var that will be your boolean flag for state (shown/hidden)
add change detector ref into your component (as you will need to cdr
change of this boolean to propagate UI)
bind your header/footer via *ngIf directive
Something like this:
import { Component, ChangeDetectorRef } from '#angular/core';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage2 {
headerVisible: boolean = false;
constructor(
public cdr: ChangeDetectorRef
) {
}
scrollState(event) {
if (event.directionY == "up") {
this.headerVisible = false;
} else {
this.headerVisible = true;
}
this.cdr.detectChanges();
}
}
And in your template:
<ion-header *ngIf="headerVisible">
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
But most probably instead of *ngIf you would want to alter header's/footer's height so that your overall template dealt better with margins.
Also please note that ideally you don't want scroll event to "spam" so you need to implement proper way you capture the state (up or down) without it (debounce / throttle it)
I want to hide my tabs when the keyboard is open, and show the tabs again when the keyboard is closed.
I know that I can go just for "AdjustSpan", and thats it, but the problem is that if I do that, the keyboard also hides an input that I have for a chat, because its a footer.
Whats the best way to hide the tabs?
I already tried with [ngClass] in , I tried with Keyboard.disableScroll, and also in app.module.ts using the parameters scrollAssist and autoFocusAssist with false value...
Nothing seems to work.
Any idea of how should I hide the tabs??
Thank you in advance!!
You have to add an eventlistener for keyboard-interaction to add (or remove) some css class to the body-tag. In ionic1 the class "hide-on-keyboard-open" was added by default from the framework. In ionic2 you have to walk the "custom-implementation-path". So, here is what you are looking for:
1) Install keyboard-plugin and node_modules as described in ionic2 docs:
ionic plugin add ionic-plugin-keyboard
npm install --save #ionic-native/keyboard
https://ionicframework.com/docs/native/keyboard/
2) Add the plugin to your app.modules.ts
3) Add the desired eventlister withiin the device-ready event in your app.component.ts:
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.keyboard.onKeyboardShow().subscribe(() => {
document.body.classList.add('keyboard-is-open');
});
this.keyboard.onKeyboardHide().subscribe(() => {
document.body.classList.remove('keyboard-is-open');
});
})
4) Add the class defintion to your app.scss with a additional class-attribute (hideElementOnKeyboardShown)
body.keyboard-is-open .hideElementOnKeyboardShown{
display: none;
}
5) Add the class to the desired element, eg an footer, div or sth else:
<ion-footer class="hideElementOnKeyboardShown">
<button round ion-button (click)="onLogin()" block>
<ion-icon name="logo-facebook" padding></ion-icon>
Login
</button>
</ion-footer>
6) in this case, put the ion-footer tag within the content-tag, otherwise the calculated viewheight isnt correct when keyboard is shown.
have a nice day!
just add the following lines to your config.xml..
<platform name="android">
<preference name="android-
manifest/application/activity/#android:windowSoftInputMode"
value="adjustPan" />
....
</platform>
What this does is modify the default value that Cordova writes to your AndroidManifest.xml to control the global keyboard input behaviour for your app.
You can achieve that by writing a directive that subscribes to the Keyboard events and then adds(hide)/removes(show) a css property/class (display: none) to the tabs element once the keyboard is shown/hidden.
#Directive({
selector: 'ion-tabs[hideTabs]',
})
export class HideTabsDirective implements OnDestroy {
private static CSS_CLASS_NAME = 'hide-tab-bar';
private show: Subscription;
private hide: Subscription;
constructor(element: ElementRef, renderer: Renderer, keyboard: Keyboard) {
platform.ready().then(() => {
this.show = keyboard.onKeyboardShow().subscribe(() =>
renderer.setElementClass(element.nativeElement, 'hide-tabs', true)
);
this.onKeyboardHideSubscription = keyboard.onKeyboardHide().subscribe(() =>
renderer.setElementClass(element.nativeElement, 'hide-tabs', false)
);
});
}
ngOnDestroy(): void {
if (this.hide !== undefined) {
this.hide.unsubscribe();
}
if (this.show !== undefined) {
this.show.unsubscribe();
}
}
}
add css class in app.scss (for example):
.hide-tabs {
display: none;
}
on your tabs element <ion-tabs hideTabs> </ion-tabs>
**code added for proof of concept