Since i used :
The ion-icon not showing on my android device, i did this for making work the firebase googleAuth !
Do you have any suggestion to make them appear ?
Thanks in advance,
ionic -v
6.16.3
be sure you have this in your angular.json:
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
If still not working, you need to add this in your app.component:
import { fetch as fetchPolyfill } from 'whatwg-fetch';
window.fetch = fetchPolyfill;
Related
I am using Ionic version 5.4.16 and i am trying to close the app by hardware back button with a alert message for confirm to exit. I have checked a lot of tutorials for the same and everywhere i saw 2 ways to achieve that --
this.platform.exitApp();
and
navigator.app.exitapp()
and
navigator.["app"].exitapp();
But none of these option are working in Ionic 5, its not recognizing the function exitApp().
So how to achieve the same if anyone has faced the same issue do suggest, thank you.
To close the app, you must configure the following:
import { Plugins } from '#capacitor/core';
const { App } = Plugins;
App.exitApp();
Try to paste this code.
public unsubscribeBackEvent: any;
ionViewDidEnter() {
this.initializeBackButtonCustomHandler();
}
initializeBackButtonCustomHandler(): void {
this.unsubscribeBackEvent = this.platform.backButton.subscribeWithPriority(999999, () => {
if(window.confirm('Do you want to exit the app?'))
{
navigator['app'].exitApp();
}
});
}
ionViewWillLeave() {
this.unsubscribeBackEvent.unsubscribe();
}
I hope it's done.
I'm using Ionic4 and I'm trying to get the device battery level. But I get an error:
ERROR TypeError: Invalid event target
and for the battery level, I get undefined.
Has anyone run into the same problem
There is an open bug report at ionic: https://github.com/ionic-team/ionic-native/issues/2972
Unfortunately no solution yet, however there is a workaround to bypass the ionic typescript wrapper and just listen directly on the window events.
fromEvent(window, 'batterystatus').subscribe((status) => {
console.log(status)
});
This is how I managed to get the battery status in Ionic 4:
window.addEventListener('batterystatus', this.onBatteryStatus, false);
onBatteryStatus(status) {
console.log('Level: ' + status.level + ' isPlugged: ' + status.isPlugged);
}
An easy way could be like this:
$ ionic cordova plugin add cordova-plugin-battery-status
$ npm install --save #ionic-native/battery-status#4
Then in your code:
import { Platform } from 'ionic-angular';
import { BatteryStatus } from '#ionic-native/battery-status';
batterylevel = 0;
constructor(...
private batteryStatus: BatteryStatus,
private plt: Platform ) {}
ionViewDidEnter()
{
// Cordova check
if(this.plt.is('core') || this.plt.is('mobileweb'))
{
// NO. It's a browser.
// don't call the batery.
}
else
{
const batterysubscription = this.batteryStatus.onChange().subscribe(status => {
this.batterylevel = status.level;
});
}
}
yourfunction()
{
console.log(this.batterylevel);
}
You'll also need to add it to your provider list too.
Of course, this will only work in emulation or a device.
I'm using Ionic Photo Viewer to show images in full screen. My HTML is:-
<ion-slides>
<ion-slide col-12 *ngFor="let image of businessImages | async">
<div class="main-slider-image" [defaultImage]="'assets/imgs/default_image_slider.png'" [lazyLoad]="image.thumb400Url" [offset]="100" (click)="openImage(image.originalUrl)">
</div>
</ion-slide>
</ion-slides>
On TypeScript:-
openImage(url) {
this.photoViewer.show(url, "", { share: false });
}
On Android is working like this:-
Click here to see Android version
On the other hand, on the iPhone is working like this:-
Click here to see iPhone version
On the iPhone, the photo viewer doesn't open the photo. I've tried:-
openImage(url) {
this.photoViewer.show(url);
}
But this also didn't work. If you've any idea how to solve this issue please share. Thank you
This issue is really crazy and had to spend lots of time to figure out the solutions. The solutions is all the parameters in the 'options' variable are required.
Follow this:
const options = {
share: true, // default is false
closeButton: true, // default is true
copyToReference: true, // default is false
headers: "", // If it is not provided, it will trigger an exception
piccasoOptions: { } // If it is not provided, it will trigger an exception
};
this.photoViewer.show(url, "", options);
At least I had to revert to 1.1.11 (found from NPM) to show IOS properly. For Android, latest version seemed to work.
Share did not seem to work for IOS in 1.1.11. In Android latest photo-viewer plugin it seemed to work. So now I have:
private viewPhoto(url: string): void {
if (url && url != 'assets/images/profile.png') {
this.photoViewer.show(url, '', { share: this.platform.is('android') });
}
}
And.. I think the correct place to discuss these is https://github.com/sarriaroman/photoviewer/issues.
And another thing, I'm considering to use another plugin, https://github.com/Riron/ionic-img-viewer. Some of the photoviewer issues had a link to this but haven't tried it yet.
I have the same error, and im solve with this
ionic cordova plugin rm com-sarriaroman-photoviewer
ionic cordova plugin add com-sarriaroman-photoviewer#1.1.18
npm install --save #ionic-native/photo-viewer
on your function, if device using ios, decodeURIComponent was the answer
showImage(url,title) {
var options = {
share: true, // default is false
closeButton: true, // iOS only: default is true
copyToReference: true // iOS only: default is false
};
if (this.platform.is("ios")) {
url = decodeURIComponent(url);
}
this.photoViewer.show(url, title, options);
}
I'm trying to disable the toolbar on android but am receiving setMapToolbarEnabled does not exist on type GoogleMap.
this.map.setMapToolbarEnabled(false);
is there another way to do this? I tried this too, and it didn't work.
this.map = this.googleMaps.create(element, {
'backgroundColor': 'white',
'controls': {
'compass': false,
'mapToolbar':false
},
Any ideas?
it works just dont forget to add api in the app.moel.ts in the proovider also
https://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/
Currently it seems that the fullscreen ability can only be activated from a user action (mouse/keyboard event). Is there a way to circumvent this?
Now, you can just add the state:"fullscreen" property on your main .js:
chrome.app.runtime.onLaunched.addListener(
function() {
chrome.app.window.create('index.html',
{
state: "fullscreen",
}
);
}
);
Make sure you don't add resizable: false or bounds properties, and you add a "fullscreen" permision on the manifest.json.
{
...
"permissions": [
...
"fullscreen"
]
}
You can use the HTML5 Fullscreen API, which requires a user action:
button.addEventListener('click', function() {
document.body.webkitRequestFullscreen();
});
or the more "app-y" way using the AppWindow object, which doesn't require a user action:
chrome.app.window.current().fullscreen();
Both need the "fullscreen" permission in the manifest.json.
I have got it working with below code
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', {
'width': 1024,
'height': 768
},
function(win) {
win.maximize();
});
});
Check out https://plus.google.com/100132233764003563318/posts/2SuD7MVd8mG referring to recently landed changelist https://chromiumcodereview.appspot.com/12205002. You can lift sample code from either of those sources:
document.body.addEventListener('click', function() {
document.body.webkitRequestFullscreen();
});
Make sure in your manifest you're requesting the "fullscreen" permission and that you're testing on a sufficiently recent Chrome build (beta channel ought to have this feature by now, and dev definitely does).
Your question specifically refers to packaged apps, but in case anyone reading this answer missed this, this will work only with Chrome packaged apps.
main.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html',{},function(window) {
window.fullscreen();
});
});
manifest.json
{
...
"manifest_version": 2,
"minimum_chrome_version": "23",
"app": {
"background": {
"scripts": ["main.js"]
}
},
"permissions": ["fullscreen"]
}
Edit: Per BeardFist's comment, my original answer was wrong on two fronts. You can do this on a Chrome Extension (which this is tagged as), but probably not on a packaged app.
For extensions you can make it go fullscreen using the state:"fullscreen" option, which can be applied with chrome.window.update. The code below chains the creation of the window via chrome.windows.create with chrome.window.update. In my experiments you could not set the fullscreen state directly through the window creation.
chrome.windows.create(
{url:"PATH/TO/POPUP"},
function(newWindow) {
chrome.windows.update(newWindow.id, {state:"fullscreen"})
});