Is there any way or any framework or any particular ionic component to implement this below kind of feature.
Here is what I want:
When I open the component for first time the pop over automatically appears over a button ( like we have page tour in websites ). On click on GOT IT it will dismiss.
Use the popover component (https://ionicframework.com/docs/api/popover) with
ionViewDidEnter(){ }
As the popover is most of the time triggered by a click, you'll need to use javascript to "fake" a click :
ionViewDidEnter(){
let element: HTMLElement = document.getElementById('button') as HTMLElement;
element.click();
}
And then you create your onClick() method for your button to present the popover.
Related
In Ionic 3, I'm trying to open a modal from within a side menu:
<ion-item menuClose (click)="presentProductModal()"> Add Product</ion-item>
When the side menu is opened, the rest of the screen loses focus. When the modal link is selected, the side menu disappears. However, the modal and the main screen remain unfocused.
I'm guessing there's some timing / promise issue here, but I'm not sure what to do exactly.
Is there some workaround?
Here are two images demonstrating the issue (the "Add Product" link opens the modal):
Thanks in advance!
You can use the menu output event: ion-close.
Listen for this event, and open the modal after menu has closed.
Read more about output events for menu here: menu close event
or
Remove menuClose directive from ion-item. In your click function, close the menu programmatically using close method. Read more about it here: Close menu programmatically.
This method will return a promise which will be resolved when menu is fully closed, you can then open the modal in its resolve.
this.menuController.close(<your menu id>).then(() => {
this.modal.create.....
})
The template for the modal was simply missing wrapping tags.
you can use MenuController
import { MenuController } from 'ionic-angular';
constructor(public menuCtrl: MenuController) {
}
If you want to close menu please use close() event
this.menuCtrl.close()
If you want to open menu please use open() event
this.menuCtrl.open();
In a tab based ionic 1.x app, I'd like to display a customized "goBackHome" button only when the <ion-nav-back-button> is not displayed.
How to detect is the <ion-nav-back-button> is displayed or not?
Here is the solution from here:
$rootScope.$on('$viewHistory.historyChange', function(e, data) {
$scope.isBackButtonShown = !!data.showBack;
});
Additionally, it might help:
App.js - custom text and icon. You can use $ionicConfigProvider.
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.backButton.previousTitleText(false).text('customText');
$ionicConfigProvider.backButton.icon('ion-ios-home');
})
Controller.js - force Ionic to display back button on certain page
.controller('yourCtrl', function($scope) {
$scope.$on('$ionicView.beforeEnter', function (event, viewData) {
viewData.enableBack = true;
});
})
Additionally resources:
Change/Hide ion-nav-back-button text
How can I change the back button title in ionic framework?
How to force Ionic display back button on certain page?
Ionic override all BACK button behaviour for specific controller
hiding back button in ionic, angularjs
Show side menu or back button conditionally
Hide with ng-hide/ng-show
Ionic - Conditionally Hiding Back Button
A working solution for the current Ionic release:
$rootScope.$on('$ionicView.beforeEnter', function(e, data) {
$scope.isBackButtonShown = data.enableBack;
});
I am using cordova-google-maps plugin with my ionic 2 app, and I want to show the menu (sidenav) on that page. Problem is for the sidenav to receive events properly I need to call map.setClickable( false ) while opening the sidenav and set it back to true when the user closes the sidenav. It seems there is an event for checking while the menu is being opened with opening, but I don't know how to track when the user closes the menu.
For using ionDrag, ionOpen, ionClose in Ionic2 you must add it on the menu itself
for example modify menu in your app.html file by
<ion-menu [content]="content" (ionOpen)="menuOpened()" (ionClose)="menuClosed()">
After I use "Events" see doc here: http://ionicframework.com/docs/v2/api/util/Events/
For detect in my page if the menu was close or open.
Example in my app.ts
menuClosed() {
this.events.publish('menu:closed', '');
}
menuOpened() {
this.events.publish('menu:opened', '');
}
And in my other page
events.subscribe('menu:opened', () => {
// your action here
});
events.subscribe('menu:closed', () => {
// your action here
});
I hope this help
It seems new events have been added to the menu component which solves this problem. I am also using the google maps plugin and it works fine
http://ionicframework.com/docs/v2/api/components/menu/Menu/
ionDrag
When the menu is being dragged open.
ionOpen
When the menu has been opened.
ionClose
When the menu has been closed.
Using these output events, in your handlers you can keep a flag for the menu if its open or not :)
How do I reload the content sitting under <ion-content> tag when back button is pressed?
The answer which is there is correct, however, it is outdated. Here is the updated answer.
Link to the Life Cycle just scroll down and you should see it.
Example:
ionViewWillEnter() {
console.log('Runs when the page is about to enter and become the active page.');
}
Just use a View Lifecycle Hook in the view you are going back you have to use for example:
onPageWillEnter() {
// You can execute what you want here and it will be executed right before you enter the view
}
Or you use a lifecycle hook on the page you are leaving then just replace onPageWillEnter() with onPageWillLeave()
With ionic beta 8 the lifecylcle events changed their names. Check out the official ionic blog for the full list of the lifecycle events.
Is there anyway i can get the hyperlink click in webview to my c# with Hyperlink value in Metro?. I am using WebView..NavigateToString() to generate the content?.
You can call InvokeScript with some of your own Javascript to set up a listener for when the user navigates away from your page. This would look something like the following in C#:
var navigationListenerString = #"
(function() {
function leavingPage() {
window.external.notify("LEAVING PAGE");
}
window.onbeforeunload = leavingPage;
})()";
webView.InvokeScript("eval", new string[] { navigationListenerString });
Then you can use ScriptNotify to listen for your particular message to determine that the page is unloading and the user is leaving. Unfortunately you cannot detect where a user is going. Also, if the hyperlink opens in a new window and the webview does not unload, you cannot detect that either.
Since WebView in windows 8 doesn't support Navigating() events like the Silverlight WebBrowser control, thus it is not possible to get hyperlink or cancel navigation.
But since you're using NavigateToString() method, you can write some manual javascript code and achieve same with the help of WebView.ScriptNotify() event.