I need to integrate Google Analytics into my Ionic 3 App.
I installed native plugin but I can’t fount Google Tracking Id. In my google Analitycs page, tracking info are is not present.
Help me please
Thanks
↧
Google Analitycs for Ionic 3 App
↧
Ionic Native Camera select Video on iOS not working
Well the problem is with the apache cordova camera plugin it provides the temporary path to the video file to come out from this error implement below changes in camera plugin.
in CDVCamera.m change THIS:
(CDVPluginResult*)resultForVideo:(NSDictionary*)info
{
NSString* moviePath = [[info objectForKey:UIImagePickerControllerMediaURL] absoluteString];
return [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:filePath];
}
to THIS:
(CDVPluginResult*)resultForVideo:(NSDictionary*)info
{
NSString* moviePath = [[info objectForKey:UIImagePickerControllerMediaURL] path];
NSArray* spliteArray = [moviePath componentsSeparatedByString: @"/"];
NSString* lastString = [spliteArray lastObject];
NSError *error;
NSFileManager *fileManager = [NSFileManager defaultManager];
NSString *documentsDirectory = [NSHomeDirectory() stringByAppendingPathComponent:@"tmp"];
NSString *filePath = [documentsDirectory stringByAppendingPathComponent:lastString];
[fileManager copyItemAtPath:moviePath toPath:filePath error:&error];
return [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:filePath];
}
Hope it will help you.
And ofcourse you should perform this also
if (this.platform.is('android')) {
filePath = 'file:///' + this.uploadForm.controls['file'].value;
} else {
filePath = this.uploadForm.controls['file'].value;
}
↧
↧
Setting up a page that only appears once for new users
Hi there, I would like to make a page to be viewed only for FIRST TIME USERS when starting the app.
Did lots of research but couldn’t find any helpful ones.
Please assist. Any help is appreciated.
Thanks!
↧
Setting up a page that only appears once for new users
You can use localstorage variable as below:
- Check variable value by
localstorage.getItem('PageDisplayed'), if it is null or empty then display first page - After Page is displayed, use
localstorage.setItem('PageDisplayed', true)and then redirect to another page. - Next time, it will not be shown because variable is set to true.
↧
Button social media link in toolbar
Hello !
On my app ! I would like in the toolbar , the title, centered and a button link to the my LinkedIn page
but my problems are : the title is not centered when I put the button, and sometimes, it will be again centered ?
The second, is , when i click the button, it open linkedin, and immediatly it close linkedin for openning the page in my Safari app
Ionic version : 5.4.5
thx all !
<ion-header>
<ion-toolbar class="new-background-color">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title class="ion-text-center" style="color:white">
Accueil
</ion-title>
<ion-button class="ion-button-block-outline icon-only" fill="" color="transparent" class="ion-float-right" href="https://www.linkedin.com/company/xxxxx" target="blank_">
<ion-icon name="logo-linkedin" class="ion-float-right" style="color:white"></ion-icon>
</ion-button>
</ion-toolbar>
</ion-header>
↧
↧
Network detection
hmm … does the network plugin have a web implementation? When I was working on it, a few months ago, it didn’t have one
↧
Ionic Native Secure Storage Not Working on Android Q
Guys,Is there any update regarding to secure storage plugin.
Is there any alternative plugin to store user credentials securely?
↧
Ionic 4 slow performance on user interaction
I was having really poor performance on my Android 9 device, what really improved the UX in my case was:
- use of *ngIf to reduce the dom size as much as possible
- improve image size/compression (with tinypng or similar)
- disable ionic animations with
IonicModule.forRoot({animated: false})
So the bottom line IMO is keep the dom as small as possible and avoid animations and/or big images.
↧
Dynamic components and Ionic grid system
(please read till the end, my question is there)
I’m using dynamic components from Angular in my Ionic project to build dynamic pages. I created a component for a collapsible container and one each for ion-grid, ion-row and ion-col.
Collapsible container:
<div>
<ion-item lines="none" (click)="setOpen(!isOpen)" color="primary" style="margin-bottom: 4px;">
<ion-icon *ngIf="isOpen" name="arrow-dropdown"></ion-icon>
<ion-icon *ngIf="!isOpen" name="arrow-dropup"></ion-icon>
<ion-label>{{title}}</ion-label>
</ion-item>
<div [hidden]="!isOpen" style="padding-left: 20px; padding-right: 20px;">
<ng-template #container></ng-template>
</div>
</div>
ion-grid:
<ion-grid>
<ng-template #grid></ng-template>
</ion-grid>
ion-row:
<ion-row>
<ng-template #row></ng-template>
</ion-row>
ion-col:
<ion-col [size]="size">
<ng-template #col></ng-template>
</ion-col>
When nesting them and placing content into the last child (ion-col), i get this, which doesn’t look like a grid anymore:
This is the generated HTML:
<app-dyn-collapsable-container _nghost-iig-c7="">
<div _ngcontent-iig-c7="">
<ion-item _ngcontent-iig-c7="" color="primary" lines="none" style="margin-bottom: 4px;" ng-reflect-color="primary" ng-reflect-lines="none" class="item-label ion-color ion-color-primary item md item-lines-none ion-focusable hydrated">
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<ion-icon _ngcontent-iig-c7="" name="arrow-dropdown" ng-reflect-name="arrow-dropdown" role="img" class="md hydrated" aria-label="arrow dropdown"></ion-icon>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
<ion-label _ngcontent-iig-c7="" class="sc-ion-label-md-h sc-ion-label-md-s md hydrated">Test</ion-label>
</ion-item>
<div _ngcontent-iig-c7="" style="padding-left: 20px; padding-right: 20px;">
<!---->
<app-dyn-grid _nghost-iig-c8="">
<ion-grid _ngcontent-iig-c8="" class="md hydrated">
<!---->
<app-dyn-grid-row _nghost-iig-c9="">
<ion-row _ngcontent-iig-c9="" class="md hydrated">
<!---->
<app-dyn-grid-row-col _nghost-iig-c10="">
<ion-col _ngcontent-iig-c10="" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">
<!---->
<app-dyn-input _nghost-iig-c11=""><span _ngcontent-iig-c11="">Col 1</span></app-dyn-input>
</ion-col>
</app-dyn-grid-row-col>
<app-dyn-grid-row-col _nghost-iig-c10="">
<ion-col _ngcontent-iig-c10="" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">
<!---->
<app-dyn-input _nghost-iig-c11=""><span _ngcontent-iig-c11="">Col 2</span></app-dyn-input>
</ion-col>
</app-dyn-grid-row-col>
<app-dyn-grid-row-col _nghost-iig-c10="">
<ion-col _ngcontent-iig-c10="" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">
<!---->
<app-dyn-input _nghost-iig-c11=""><span _ngcontent-iig-c11="">Col 3</span></app-dyn-input>
</ion-col>
</app-dyn-grid-row-col>
<app-dyn-grid-row-col _nghost-iig-c10="">
<ion-col _ngcontent-iig-c10="" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">
<!---->
<app-dyn-input _nghost-iig-c11=""><span _ngcontent-iig-c11="">Col 4</span></app-dyn-input>
</ion-col>
</app-dyn-grid-row-col>
<app-dyn-grid-row-col _nghost-iig-c10="">
<ion-col _ngcontent-iig-c10="" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">
<!---->
<app-dyn-input _nghost-iig-c11=""><span _ngcontent-iig-c11="">Col 5</span></app-dyn-input>
</ion-col>
</app-dyn-grid-row-col>
</ion-row>
</app-dyn-grid-row>
</ion-grid>
</app-dyn-grid>
</div>
</div>
</app-dyn-collapsable-container>
But when placing the grid directly in the collapsible container, I get the following (and expected) output:
<div>
<ion-item lines="none" (click)="setOpen(!isOpen)" color="primary" style="margin-bottom: 4px;">
<ion-icon *ngIf="isOpen" name="arrow-dropdown"></ion-icon>
<ion-icon *ngIf="!isOpen" name="arrow-dropup"></ion-icon>
<ion-label>{{title}}</ion-label>
</ion-item>
<div [hidden]="!isOpen" style="padding-left: 20px; padding-right: 20px;">
<!-- <ng-template #container></ng-template> -->
<ion-grid>
<ion-row>
<ion-col size="6">col 1</ion-col>
<ion-col size="6">col 2</ion-col>
<ion-col size="6">col 3</ion-col>
<ion-col size="6">col 4</ion-col>
<ion-col size="6">col 5</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
With folling generated HTML:
<app-dyn-collapsable-container _nghost-tfd-c7="">
<div _ngcontent-tfd-c7="">
<ion-item _ngcontent-tfd-c7="" color="primary" lines="none" style="margin-bottom: 4px;" ng-reflect-color="primary" ng-reflect-lines="none" class="item-label ion-color ion-color-primary item md item-lines-none ion-focusable hydrated">
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<ion-icon _ngcontent-tfd-c7="" name="arrow-dropdown" ng-reflect-name="arrow-dropdown" role="img" class="md hydrated" aria-label="arrow dropdown"></ion-icon>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
<ion-label _ngcontent-tfd-c7="" class="sc-ion-label-md-h sc-ion-label-md-s md hydrated">Test</ion-label>
</ion-item>
<div _ngcontent-tfd-c7="" style="padding-left: 20px; padding-right: 20px;">
<ion-grid _ngcontent-tfd-c7="" class="md hydrated">
<ion-row _ngcontent-tfd-c7="" class="md hydrated">
<ion-col _ngcontent-tfd-c7="" size="6" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">col 1</ion-col>
<ion-col _ngcontent-tfd-c7="" size="6" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">col 2</ion-col>
<ion-col _ngcontent-tfd-c7="" size="6" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">col 3</ion-col>
<ion-col _ngcontent-tfd-c7="" size="6" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">col 4</ion-col>
<ion-col _ngcontent-tfd-c7="" size="6" ng-reflect-size="6" class="md hydrated" style="flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);">col 5</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
</app-dyn-collapsable-container>
My question now is:
It seems the extra tags created (like “app-dyn-grid-row”) interfer somehow with the grid system, is there a way to fix this?
↧
↧
Setting up a page that only appears once for new users
Do I replace (‘PageDisplayed’) with my page name?
↧
Prevent from closing the app
Hi there,
I have an app on ionic 4 and on the first page after initialization I have a modal. Problem is, when I open this modal and then click on HW back button on android, the app closes.
Is there a way, how to prevent app closes in this case?
Thanks
↧
Setting up a page that only appears once for new users
Hi, I don’t speak English very well but I will try it.
As niravparsana94 said, you can use localStorage for check if page it was showed.
If you use Ionic with Angular then in your ngOnInit you must set localStorage when page show:
ngOnInit() {
const checkView = localStorage.getItem('pageDisplayed');
if (checkView) {
// here redirect
}
localStorage.setItem('pageDisplayed', 'ok');
}
then if exist localStorage item checkView you can redirect to another page
Greetings from Chile
↧
Ionic 4 - XMLHttpRequest throw error
Yes you are right. I didn’t recognize that this thread is assigned to the ‘Angular’ subcategory.
In that case I would also highly suggest to refactor the code first in Angular way (using HttpClient) to make an request.
Maybe a lot of things are solved automatically then 
↧
↧
Fcm with Firebase dynamiclinks showing error for IOS in ionic
I have the exact same issue. Did you solve it?
↧
Ionic 4 - sass best practices
I’m facing the same problem 
Are there any solution for this?
I’m just starting to customize something and it doesn’t works already on simple things…?
↧
Setting up a page that only appears once for new users
It doesn’t matter what you keep, it’s variable afterall. You can keep any name as you want!
↧
Help us test the Ionic 5 Release Candidate!
Yes, that is correct! Ionicons did have a lot of changes with the release of Ionicons 5, more info in its changelog: https://github.com/ionic-team/ionicons/blob/0d757ad96aa42847da80853ac1c0c3d43ac6a641/CHANGELOG.md
↧
↧
Prevent from closing the app
↧
net::ERR_CONNECTION_REFUSED (http://localhost:8080/)
↧
Capacitor PushNotifications not working in Android
Hey!
I have an Ionic 4 app using the capacitor pushnotification plugin working perfectly when the app is in foreground. I can receive all pushes correcly which means the device is correcly registered and reachable from GCM.
But When the app is closed, sending the same push message is not received by the notification center. When I open the app after sending the push, I’m able to alert the push message sent before meaning the message is well received by the device. It’s like the push is correclty received by the device but the notification center just not catch/show it.
My environment:
OS: Android
Ionic 4
Push sender: Azure Notification Hub
I tried all type of Payload: notification/data/combination of both but without success.
PS: Using the phonegap/cordova push plugin works like a charm, I just want to remove all cordova dependencies from my project and use capacitor instead
Could it be related to some android app settings (AndroidManifest.xml)? Please drive me to the right direction 
Cheers,
Fabien.
↧