How to navigate success page once payment is success using ionic 4

June 15, 2020, 11:40 am

≫ Next: IONIC 4: *ngIf directive is not working in IOS

≪ Previous: Get user email id useing login with twitter in ionic 2

$

0

0

Sorry but i can barely figure out what your code is doing but here is what i can suggest.

You need to have separation of tasks.

1. Create a service that handles all related authentication issues this will code away the need to call storage requests here plus username and password issues.
2. Create a service to handle payment tasks. This will help deal with successful and failed payment and help to give feedback in order to route to desired locations
3. Create service to deal with invoices and related tasks like pending invoices, payment status et al

---

IONIC 4: *ngIf directive is not working in IOS

June 15, 2020, 1:05 pm

≫ Next: Ionic tabs with new pages

≪ Previous: How to navigate success page once payment is success using ionic 4

$

0

0

I am developing an application in ionic and I have the following problem in IOS. In android it does not happen to me.

I have this line:

<ion-badge color="success" *ngIf="banderaflag"  style="position:absolute; left:50%; top:-75%" routerLink="/notificaciones">{{numeronotificaciones}}</ion-badge>

This banderaflag I declared like this.

banderaflag= false;

And here is the function I used for changing the banderaflag’s value:

notificacionescontar(){

   if( this.numeronotificaciones > 0){
this.banderaflag= true;

}else{
     this.banderaflag= false;

} }

In android, when banderaflag change from false to true, the ion-bagde tag appears perfectly. But in IOS dont.

In IOS.

In Android:

What Can i do?

Ionic tabs with new pages

June 15, 2020, 2:01 pm

≫ Next: Ionic tabs with new pages

≪ Previous: IONIC 4: *ngIf directive is not working in IOS

$

0

0

In previous versions of ionic I am used to using the tabs in the root but I see all the new examples change this where it has its own modules and child routes. I am running V4 of ionic.

1. I want to know if new pages should be declared in a single routing page or should they be in separate routing files(one inherited by the app.module and one by the tabs.module)

2. I am trying to run a route guard on my routes using Angularfire (not angularfireauthguard) but I keep getting a nullinjector error for the Angular auth service.

• I have tried importing the auth module into both the tab and the root but that doesnt work.
• I think it has something to do with the fact that the the tabs are trying to navigate to a route not declared in teh tab routing.

its a standard auth guard that accesses the Agularfire service.

Below is a code snippet of the auth guard.

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot,
  ): Observable<boolean> | Promise<boolean> | boolean {
    return this.afauth.authState.pipe(
      map((user: firebase.User) => {
        if (user.isAnonymous || user === null) {
          this.presentToast('You need to be logged in to access this feature.');
          this.router.navigateByUrl('/signin');

          return false;
        } else {
          console.log(next.url);
          /**if (next.url === 'signin' || next.url === 'signun') {
            this.presentToast('You are already authenticated.');
            this.router.navigateByUrl('/tabs/scan');
            return false;
          }**/
          return true;
        }
      }),
    );
  }

Below is a snippet of my tabs

path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'account',
        children: [
          {
            path: '',
            loadChildren: '../pages/account/account.module#AccountPageModule',
            canActivate: [AuthGuard],
          },
        ],
      },

Snippet of my app.routing

{
    path: 'detail-account',
    loadChildren: './pages/detail-account/detail-account.module#DetailAccountPageModule',
    canActivate: [AuthGuard],
  },

Ionic tabs with new pages

June 15, 2020, 2:05 pm

≫ Next: Ionic tabs with new pages

≪ Previous: Ionic tabs with new pages

$

0

0

Can you put this into a runnable demo?

Ionic tabs with new pages

June 15, 2020, 2:06 pm

≫ Next: Ionic tabs with new pages

≪ Previous: Ionic tabs with new pages

$

0

0

Can I DM you the repo of github?

Ionic tabs with new pages

June 15, 2020, 2:07 pm

≫ Next: IONIC 4: *ngIf directive is not working in IOS

≪ Previous: Ionic tabs with new pages

$

0

0

Just make a minimal example and post it to github. I do not need/want your entire app.
Make the minimal example that you can to test/validate the concepts.

IONIC 4: *ngIf directive is not working in IOS

June 15, 2020, 2:13 pm

≫ Next: How to download image from app to phone gallery?

≪ Previous: Ionic tabs with new pages

$

0

0

Not a lot to go off of from that. Can you replicate this in a demo that people could inspect?

Testing it out locally, (just a ngIf test case) and it works fine.
I dont think the issue would exist in ngIf, but probably else where in your code.

So, a demo would help a lot here.

How to download image from app to phone gallery?

June 15, 2020, 2:47 pm

≫ Next: Rich Text Editor on Ionic

≪ Previous: IONIC 4: *ngIf directive is not working in IOS

$

0

0

I have a mobile app that stores and displays photos, much like the Your First Ionic App example. What would be the best way to download these photos to my phone’s photo gallery? I am using Capacitor.

---

Rich Text Editor on Ionic

June 15, 2020, 2:47 pm

≫ Next: How to change or override primary color in Ionic 5?

≪ Previous: How to download image from app to phone gallery?

$

0

0

Have a look at summernote. Did the job for me.

How to change or override primary color in Ionic 5?

June 15, 2020, 3:00 pm

≫ Next: Electron run by Capacitor in Ionic 5: console logging and live reload not working

≪ Previous: Rich Text Editor on Ionic

$

0

0

Hi all,

Having a hard time to change:

root {
  /** primary **/
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

in the variables.scss in Ionic 5. Whatever I do, I can’t change or override the primary color. Is this a known issue or am I doing something wrong here?

Electron run by Capacitor in Ionic 5: console logging and live reload not working

June 15, 2020, 3:09 pm

≫ Next: Getting location of iOS devices is inconsistent

≪ Previous: How to change or override primary color in Ionic 5?

$

0

0

can anybody help with this ?

here are steps to reproduce this:

# install ionic CLI
$ npm install -g @ionic/cli

# create project w/ capacitor
$ ionic start <project name> blank --type=angular --capacitor

# create initial build, needed by cap for electron 
$ cd <ionic_project_folder>
$ ionic build

# add electron via cap
$ npx cap add electron

# run electron
$ npx cap open electron

if you enter console.log messages in electron’s index.js, none of them will be logged…

Getting location of iOS devices is inconsistent

June 15, 2020, 3:31 pm

≫ Next: Ion-infinite-scroll in custom component v5

≪ Previous: Electron run by Capacitor in Ionic 5: console logging and live reload not working

$

0

0

I haven’t not been able to find an example of how to use cordova.plugins.diagnostic.requestLocationAuthorization in an Ionic 4 app.

Meaning, how to install the plugin and the import statement. I’ve created an Ionic 4 social media app and I’d like to prompt users for access to device location. It’s working fine in Android but iOS is not consistent. It will sometimes get the device location while testing on a real device and sometimes when I uninstall and redeploy it won’t. It just seems random at this point whether or not it retrieves and saves the device location to the backend for iOS devices. So I’d like to prompt users if I query the backend and don’t have their device location.

Any help would be greatly appreciated.

` this.platform.ready().then(() => {
firebase.auth().onAuthStateChanged(user => {
if (!user) {
this.router.navigateByUrl(‘login’);
this.statusBar.styleDefault();
this.splashScreen.hide();
} else {
cordova.plugins.diagnostic.requestLocationAuthorization((status) => {
console.log(status);
}, (error) => {
console.error(error);
}, cordova.plugins.diagnostic.locationAuthorizationMode.ALWAYS);
this.diagnostic.getLocationAuthorizationStatus()
.then((status) => {
if ((status === undefined) || (status === null)) {
this.diagnostic.requestLocationAuthorization();
}
console.log(‘auth stat’, status);
})
.catch((error) => {
console.log(error);
});
this.router.navigateByUrl(‘tabs/profile’);
this.statusBar.styleDefault();
this.splashScreen.hide();
}``
type or paste code here

Again I'm using: Ionic -v 5.4.13

9.0.0 (cordova-lib@9.0.1)

I can actually use this.diagnostic.getLocationAuthorizationStatus() to get the autorization status from iOS. But I need a way to prompt users in case it's not activated.

ERROR in src/app/app.component.ts:37:11 - error TS2304: Cannot find name ‘cordova’.

37 cordova.plugins.diagnostic.requestLocationAuthorization((status) => {
~~~~~~~
src/app/app.component.ts:41:12 - error TS2304: Cannot find name ‘cordova’.

41 }, cordova.plugins.diagnostic.locationAuthorizationMode.ALWAYS);
~~~~~~~

[ERROR] An error occurred while running subprocess ng.

Ion-infinite-scroll in custom component v5

June 15, 2020, 5:01 pm

≫ Next: Angular storage get return undefined

≪ Previous: Getting location of iOS devices is inconsistent

$

0

0

I have a list that takes up 50vh. I want to use infinite scroll on that list.
This doesn’t work. From reading the docs, it looks like <ion-infinite-scroll> is based off the scroll position in the page. I was hoping it was based off of whether or not the scroll element was rendered in viewport

I’ve created this demo:
https://ionic-v4-angular-tabs-lq95xj.stackblitz.io

All of the demo code is for tab1.

If you comment out tab1.scss height:

.top-half {
 // height: 50vh;
  overflow: scroll;
}

Then the expected functionality returns.

Is it possible to pass in the element I want to base the scroll position on?
Something like:

 <ion-list #scrollList></ion-list>

  <ion-infinite-scroll scroll="scrollList" threshold="100px" (ionInfinite)="loadData($event)" >

Angular storage get return undefined

June 15, 2020, 6:29 pm

≫ Next: Angular storage get return undefined

≪ Previous: Ion-infinite-scroll in custom component v5

$

0

0

Hi, thanks for your feedback. I wil get the doc, ready and start using the Observable on this project. Do you think is better save the data using storage only the check in future to keep the user connected?

Angular storage get return undefined

June 15, 2020, 6:59 pm

≫ Next: Angular storage get return undefined

≪ Previous: Angular storage get return undefined

$

0

0

I’m not entirely sure I understand you here, so let me try rephrasing and ask you if this is what you mean:

Do you recommend storing access tokens using Ionic Storage so that the the app can automatically reauthenticate the user the next time the app is launched in the future?

If that’s the question, then yes, I think that’s a perfectly reasonable thing to do.

---

Angular storage get return undefined

June 15, 2020, 7:11 pm

≫ Next: Rich Text Editor on Ionic

≪ Previous: Angular storage get return undefined

$

0

0

This is the question… Thanks… I am starting reading it now and I will share the result.

Rich Text Editor on Ionic

June 15, 2020, 9:28 pm

≫ Next: Importing Python-Shell to Ionic 2 project

≪ Previous: Angular storage get return undefined

$

0

0

Hey thank you! I will check it out.

I came accross the ‘rich-text-editor’ by Team Hive

It looks promising. But for sure I’ll check the summernote.

Cheers,

Importing Python-Shell to Ionic 2 project

June 15, 2020, 10:24 pm

≫ Next: How cancel Android back button event?

≪ Previous: Rich Text Editor on Ionic

$

0

0

Initially, we have to begin with a note about least necessities for building your application with the current arrival of Ionic. Ionic targets iPhone and Android gadgets (as of now). We bolster iOS 7+, and Android 4.1+. Be that as it may, since there are a variety of Android gadgets, it’s conceivable sure ones probably won’t work. As usual, we are searching for help testing and improving our gadget similarity and would adore help from the network on our GitHub venture.

You can create Ionic applications on any working framework you like. Truth be told, Ionic has been created at different occasions on Mac OS X, Linux, and Windows. Be that as it may, at the present time you’ll have to utilize the order line so as to follow this guide and you should have OS X so as to create and send iPhone applications, so OS X is suggested if conceivable.

In the event that you are on Windows, make a point to download and introduce Git for Windows and alternatively Console2. You will execute any orders in this guide in the Git Bash or Console2 windows.

To start with, we will proceed to introduce the latest rendition of Apache Cordova, which will take our application and pack it into a local covering to transform it into a conventional local application.

To introduce Cordova, ensure you have Node.js introduced, at that point run.

That will create a folder called todo in the directory the command was run. Next, we will go into that directory and list the contents. Here is what the outer structure of your Ionic project will look like:

That will create a folder called todo in the directory the command was run. Next, we will go into that directory and list the contents. Here is what the outer structure of your Ionic project will look like:
$ cd todo && ls

├── bower.json // bower dependencies
├── config.xml // cordova configuration
├── gulpfile.js // gulp tasks
├── hooks // custom cordova hooks to execute on specific commands
├── ionic.project // ionic configuration
├── package.json // node dependencies
├── platforms // iOS/Android specific builds will reside here
├── plugins // where your cordova/ionic plugins will be installed
├── scss // scss code, which will output to www/css/
└── www // application - JS code and libs, CSS, images, etc. If you interested read more:
https://www.cetpainfotech.com/technology/python-training

How cancel Android back button event?

June 16, 2020, 12:18 am

≫ Next: Cannot get past this:

≪ Previous: Importing Python-Shell to Ionic 2 project

$

0

0

No need for plugin, you can do it with this.platform like this:

this.platform.backButton.subscribe(() => {
        if (this.router.url === '/Login') {
          this.util.presentAppExitAlert();
        } else {
          // event.preventDefault();
          console.log("invoing url ", this.router.url);
        }
      });
    });

Take a look here: https://stackoverflow.com/questions/55274992/ionic-4-prevent-disable-device-hardware-backbutton/58449967#58449967

Cannot get past this:

June 16, 2020, 12:21 am

≫ Next: iTunes File Sharing

≪ Previous: How cancel Android back button event?

$

0

0

] : Compiled successfully.
[ng]
[ng] ERROR in src/app/data.service.ts:3:17 - error TS2304: Cannot find name ‘environment’.
[ng]
[ng] 3 const apiUrl = environment.apiUrl;