Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all 49399 articles
Browse latest View live

Events not working/ I don't know how to use them

$
0
0

I’m using Ionic events, but I don’t quite know how. I checked the docs and couldn’t find anything useful. I want to log the content of the <IonInput> tag to console, but when I use onIonChange or onIonInput, nothing happens at all. There are no errors as well. Please help!

    <div className="container">

        <IonItem>
        <IonLabel position="floating">What is your email address? This will be used for communication.</IonLabel>
        <IonInput value={text} placeholder="Enter Input" onIonInput={e => console.log(document.querySelector('ion-input')?.value!)} clearInput></IonInput>
        </IonItem>
        
        </div>

1 post - 1 participant

Read full topic


Ionic music controls

$
0
0

Hello,

i am writing an mobile app using ionic music control. It works fine on Android, but the problem is, that my code doesn’t work at all on iOS.

Do you have any working example that i can relay on? Or maybe you can take a look at my code:

and point out any issues.

Cheers!

1 post - 1 participant

Read full topic

Ionic Angular or Ionic Vue for complex application architecture?

$
0
0

Hey guys,

I’m planing to develop an application for IOS and Android and also a web-based admin application, which could be considered as complex. Which Ionic would you suggest - Ionic Angular or Ionic Vue? I read, that Vue would be clearly faster, but is it also useable for complex application architectures?

Thanks in advance!

1 post - 1 participant

Read full topic

Nested ion-tabs work but error with Cannot match any routes. URL Segment x

$
0
0

I have a nested Tabs situation where the tabs physically work and routing works but there’s an error in the console of:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ____

Weirdly it all works and functions fine. Just this console error is annoying!

My setup is:

 Main (with set of tabs for):
    Home (/home)
    Meetings (/meetings)
    Rooms (/rooms)
       Room (/room/:id) (with set of tabs for):
           People (/room/:id/people)
           Settings (/room/:id/settings)

Main routing (page with tabs):

const routes: Routes = [
  {
    path: '',
    component: MainPage,
    children: [
      {
        path: 'home',
        loadChildren: () => import('./pages/home/home.module').then((m) => m.HomePageModule),
      },
      {
        path: 'meetings',
        loadChildren: () => import('./pages/meetings/meetings.module').then((m) => m.MeetingsPageModule),
      },
      {
        path: 'rooms',
        loadChildren: () => import('./pages/rooms/rooms.module').then((m) => m.RoomsPageModule),
      },
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'home',
      },
    ],
  },
];

Rooms routing:

{
  path: '',
  component: RoomsPage,
},
{
  path: ':id',
  loadChildren: () => import('./room/room.module').then((m) => m.RoomPageModule),
},

Room page (page with tabs):

{
  path: '',
  component: RoomPage,
  children: [
    {
      path: 'people',
      component: PeoplePage,
    },
    {
      path: 'settings',
      component: SettingsPage,
    },
    {
      path: '',
      redirectTo: 'people',
      pathMatch: 'full',
    },
  ],
},

turning on route tracing I see it successfully navigate between the nested set of tabs by pressing the buttons on it but then a second NavigationStart event is fired for an absolute path, i.e. /people which will obviously fail. No where in my code do I have such a trigger?

Router Event: NavigationStart platform-browser.js:71
NavigationStart(id: 5, url: '/rooms/1/people') platform-browser.js:66
Object { id: 5, url: "/rooms/1/people", navigationTrigger: "imperative", restoredState: null }
platform-browser.js:66
Router Event: RoutesRecognized platform-browser.js:71
RoutesRecognized(id: 5, url: '/rooms/1/people', urlAfterRedirects: '/rooms/1/people', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'rooms', path:'rooms') { Route(url:'1', path:':id') { Route(url:'', path:'') { Route(url:'people', path:'people') }  }  }  }  }  } ) platform-browser.js:66
Object { id: 5, url: "/rooms/1/people", urlAfterRedirects: "/rooms/1/people", state: {…} }
platform-browser.js:66
Router Event: GuardsCheckStart platform-browser.js:71
GuardsCheckStart(id: 5, url: '/rooms/1/people', urlAfterRedirects: '/rooms/1/people', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'rooms', path:'rooms') { Route(url:'1', path:':id') { Route(url:'', path:'') { Route(url:'people', path:'people') }  }  }  }  }  } ) platform-browser.js:66
Object { id: 5, url: "/rooms/1/people", urlAfterRedirects: "/rooms/1/people", state: {…} }
platform-browser.js:66
Router Event: ChildActivationStart platform-browser.js:71
ChildActivationStart(path: '') platform-browser.js:66
Object { snapshot: {…} }
platform-browser.js:66
Router Event: ActivationStart platform-browser.js:71
ActivationStart(path: 'people') platform-browser.js:66
Object { snapshot: {…} }
platform-browser.js:66
Router Event: GuardsCheckEnd platform-browser.js:71
GuardsCheckEnd(id: 5, url: '/rooms/1/people', urlAfterRedirects: '/rooms/1/people', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'rooms', path:'rooms') { Route(url:'1', path:':id') { Route(url:'', path:'') { Route(url:'people', path:'people') }  }  }  }  }  } , shouldActivate: true) platform-browser.js:66
Object { id: 5, url: "/rooms/1/people", urlAfterRedirects: "/rooms/1/people", state: {…}, shouldActivate: true }
platform-browser.js:66
Router Event: ResolveStart platform-browser.js:71
ResolveStart(id: 5, url: '/rooms/1/people', urlAfterRedirects: '/rooms/1/people', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'rooms', path:'rooms') { Route(url:'1', path:':id') { Route(url:'', path:'') { Route(url:'people', path:'people') }  }  }  }  }  } ) platform-browser.js:66
Object { id: 5, url: "/rooms/1/people", urlAfterRedirects: "/rooms/1/people", state: {…} }
platform-browser.js:66
Router Event: ResolveEnd platform-browser.js:71
ResolveEnd(id: 5, url: '/rooms/1/people', urlAfterRedirects: '/rooms/1/people', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'rooms', path:'rooms') { Route(url:'1', path:':id') { Route(url:'', path:'') { Route(url:'people', path:'people') }  }  }  }  }  } ) platform-browser.js:66
Object { id: 5, url: "/rooms/1/people", urlAfterRedirects: "/rooms/1/people", state: {…} }
platform-browser.js:66
Router Event: ActivationEnd platform-browser.js:71
ActivationEnd(path: 'people') platform-browser.js:66
Object { snapshot: {…} }
platform-browser.js:66
Router Event: ChildActivationEnd platform-browser.js:71
ChildActivationEnd(path: '') platform-browser.js:66
Object { snapshot: {…} }
platform-browser.js:66
Router Event: ActivationEnd platform-browser.js:71
ActivationEnd(path: '') platform-browser.js:66
Object { snapshot: {…} }
platform-browser.js:66
Router Event: ChildActivationEnd platform-browser.js:71
ChildActivationEnd(path: ':id') platform-browser.js:66
Object { snapshot: {…} }
platform-browser.js:66
Router Event: ActivationEnd platform-browser.js:71
ActivationEnd(path: ':id') platform-browser.js:66
Object { snapshot: {…} }
platform-browser.js:66
Router Event: ChildActivationEnd platform-browser.js:71
ChildActivationEnd(path: 'rooms') platform-browser.js:66
Object { snapshot: {…} }
platform-browser.js:66
Router Event: ActivationEnd platform-browser.js:71
ActivationEnd(path: 'rooms') platform-browser.js:66
Object { snapshot: {…} }
platform-browser.js:66
Router Event: ChildActivationEnd platform-browser.js:71
ChildActivationEnd(path: '') platform-browser.js:66
Object { snapshot: {…} }
platform-browser.js:66
Router Event: ActivationEnd platform-browser.js:71
ActivationEnd(path: '') platform-browser.js:66
Object { snapshot: {…} }
platform-browser.js:66
Router Event: ChildActivationEnd platform-browser.js:71
ChildActivationEnd(path: '') platform-browser.js:66
Object { snapshot: {…} }
platform-browser.js:66
Router Event: ActivationEnd platform-browser.js:71
ActivationEnd(path: '') platform-browser.js:66
Object { snapshot: {…} }
platform-browser.js:66
Router Event: ChildActivationEnd platform-browser.js:71
ChildActivationEnd(path: '') platform-browser.js:66
Object { snapshot: {…} }
platform-browser.js:66
Router Event: NavigationEnd platform-browser.js:71
NavigationEnd(id: 5, url: '/rooms/1/people', urlAfterRedirects: '/rooms/1/people') platform-browser.js:66
Object { id: 5, url: "/rooms/1/people", urlAfterRedirects: "/rooms/1/people" }
platform-browser.js:66
Router Event: Scroll platform-browser.js:71
Scroll(anchor: 'null', position: 'null') platform-browser.js:66
Object { routerEvent: {…}, position: null, anchor: null }
platform-browser.js:66
Router Event: NavigationStart platform-browser.js:71
NavigationStart(id: 6, url: '/people') platform-browser.js:66
Object { id: 6, url: "/people", navigationTrigger: "imperative", restoredState: null }
platform-browser.js:66
Router Event: NavigationError platform-browser.js:71
NavigationError(id: 6, url: '/people', error: Error: Cannot match any routes. URL Segment: 'people') platform-browser.js:66
Object { id: 6, url: "/people", error: Error }

1 post - 1 participant

Read full topic

Upload resources fail with 410

$
0
0

I have mobile app that hasn’t been update for a while and it’s still using ionic CLI 3.19.1. I need to make some changes now and when building the app I am getting error at the step when it tries to generate the resources by reaching out ionic api (https://res.ionic.io/api/v1/upload). The error status is 410, has the api url been retired and do I need to upgrade to higher version which I would prefer to avoid.

Thanks

1 post - 1 participant

Read full topic

Page does not re-render on Tabs navigation

$
0
0

When I navigate for the 1st time to the AddCustomer tab - I can see the alert; the subsequent times - no alert. It means that the AddCustomer component is rendered only once.
Is that by design?
How can that be fixed?
Thanks

App.tsx

  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Redirect exact from="/" to="/add-customer" />

          <Route exact path="/customer-list">
            <CustomerList />
          </Route>

          <Route exact path="/add-customer">
            <AddCustomer  />
          </Route>
        </IonRouterOutlet>

        <IonTabBar slot="bottom">
          <IonTabButton tab="customer-list" href="/customer-list">
            <IonIcon icon={list} />
            <IonLabel>Customers</IonLabel>
          </IonTabButton>

          <IonTabButton tab="add-customer" href="/add-customer">
            <IonIcon icon={add} />
            <IonLabel>Add customer</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

CustomerList.tsx

const CustomerList: React.FC = () => {
  return (
    <IonPage>
      <IonContent fullscreen>
        <div>foo</div>
      </IonContent>
    </IonPage>
  );
};

AddCustomer.tsx

const AddCustomer: React.FC = () => {
  useEffect(() => {
     alert(123);
  }, []);

  return (
    <IonPage>
      <IonContent>
       <div>bar</div>
      </IonContent>
    </IonPage>
  );
};

2 posts - 2 participants

Read full topic

How to properly type refs to ionic inputs?

Need advice

$
0
0

Hi, i currently know vue.js and wanna learn a technology for building cross platform mobile apps. I want to stay away from react native as i do not like react and find it complicated. Also i am having problems connecting my phones to my pc so Flutter will not work for me, flutter has nothing like ExpoGo in react native.

I think i have 2 options, NativeScript and Ionic.

Does Ionic becomes slow when the app grows ?

Does Ionic or Native script generate apps like react native that can be uploaded to the play store or its just good looking apps in the browser ?

I do not want to learn something and then leave it to learn something else, also i want something to be compatible with vue.js, thanks for advice and help.

3 posts - 3 participants

Read full topic


How to Protect your Website from hackers

$
0
0

You do not believe your site is worth hacking, but websites are constantly infected.

Automated scripts written to scour the internet in an effort to circumvent established website security flaws in applications are often used in hacking. Here are our top seven online safety tips to help keep you and your web security.

  1. Keep software up to date
  2. Watch out for SQL injection
  3. Protect against XSS attacks
  4. Beware of error messages
  5. Validate on both sides
  6. Check your passwords
  7. Avoid file uploads

For more tips on cybersecurity Hire a hacker.

1 post - 1 participant

Read full topic

My Ionic button handles a local request (http://localhost/login) on Android emulator instead of https://xx.xx.xx/login

$
0
0

I have developed an Ionic React app , running on top of Capacitor . In browser everything runs smoothly (ionic serve).

Now I’m trying to run my app on an Android emulator , but my login button is not working. I click on it and nothing happens. In LogCat I see this log when I click on the button:

/io.ionic.starter D/Capacitor: Handling local request: http://localhost/login

In order to solve CORS issues, in package.json I’m using a proxy: "proxy": "https://xx.xx.xx",

In Login Component, I’m calling a POST axios request in order to login with cardNumber and birthday.

Login Component:

import React from "react";
import { useHistory } from "react-router-dom";
import { useState, useContext } from "react";
import axios from "axios";
import {
  ...
} from "@ionic/react";

const Login = () => {
  const history = useHistory();
  const {
    cardNumber,
    setCardNumber,
    birthday,
    setBirthday,
    iserror,
    setIserror,
    message,
    setMessage,
  } = useContext(MyContext);

  const doLoginwithBirthday = (e: any) => {
    e.preventDefault();
    setIserror(false);

    const data = {
      cardNr: cardNumber,
      birthDate: birthday,
    };
    

    axios
      .post("/login", data)
      .then((response) => {
        if (response.data.token) {
          history.push("/home");
          window.location.reload();
        }
        return response.data;
      })
      .catch((error) => {
        setMessage(
          "Try again!"
        );
        setIserror(true);
      });
  };

  return (
    <IonPage>
      <IonHeader></IonHeader>
      <IonContent className="ion-padding ion-text-center">
        <IonGrid>
          <IonRow>
            <IonCol>
              <IonAlert
                isOpen={iserror}
                onDidDismiss={() => setIserror(false)}
                header={"Info!"}
                message={message}
                buttons={["OK"]}
              />
            </IonCol>
          </IonRow>
        
                <h1>Login</h1>
            
              <IonItem>
                <IonLabel position="floating">Card Number</IonLabel>
                <IonInput
                  name="cardNumber"
                  type="number"
                  value={cardNumber}
                  onIonChange={(e) => setCardNumber(e.detail.value!)}
                />
              </IonItem>

             
              <IonItem>
                <IonLabel position="floating">Birthday</IonLabel>
                <IonInput
                  name="birthday"
                  type="text"
                  value={birthday}
                  onIonChange={(e) => setBirthday(e.detail.value!)}
                />
              </IonItem>
              <br />
              <IonButton onClick={doLoginwithBirthday}>Login</IonButton>
             
              <IonItem
                lines="none"
                routerLink="/register"
                class="ion-text-right"
              >
                <IonLabel>Register</IonLabel>
              </IonItem>
           
        </IonGrid>
      </IonContent>
    </IonPage>
  );
};
export default Login;

How is it possible that clicking the Login button handles the request: http://localhost/login instead of https://xx.xx.xx/login ?

Should I change anything on Android ?

capacitor.config.json

{
  "appId": "io.ionic.starter",
  "appName": "testApp",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "build",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {}
}

1 post - 1 participant

Read full topic

Using webview plugin but app still rejected by Apple for UIWebView

$
0
0

Hi,

Ionic CLI : 5.2.1
Cordova CLI: 8.0.0
Cordova iOS 5.1.1

I’ve got two questions:

  1. Is there any way to confirm whether UIWebView is being used before I upload to Apple because that’s a time-consuming way of checking …

  2. I have installed cordova-plugin-ionic-webview 5.0.0 and I have modified the config.xml to force WKWebView as below

     <feature name="CDVWKWebViewEngine">
         <param name="ios-package" value="CDVWKWebViewEngine" />
     </feature>
     <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
     <preference name="WKWebViewOnly" value="true" />
    

But when I upload through XCode, Apple bounces the app back saying it’s using UIWebView

I have done platform rm/add multiple times, to no avail

Any ideas?

1 post - 1 participant

Read full topic

Get KeyChainService Value from iOS

$
0
0

Actually we are migrating our iOS project into ionic one.
So the new project need to get some data from the iOS one, we try with UserDefaults and we don’t have problem to get UserDefaults value, but we didn’t find solution for KeyChain.

Configuration :

Ionic:

   Ionic CLI                     : 6.12.3
   Ionic Framework               : @ionic/angular 5.6.5
   @angular-devkit/build-angular : 0.901.15
   @angular-devkit/schematics    : 9.1.15
   @angular/cli                  : 9.1.15
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 3.0.0-rc.1
   @capacitor/core : 3.0.0-rc.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res : 0.15.3
   native-run  : 1.3.0

System:

   NodeJS : v15.5.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.11
   OS     : Windows 10

I’m trying to access the Keychain value in my Ionic application, but it’s not working.


    private static let keySeed = "***.***.app.key.Seed"
    private static let keyIV = "***.***.app.key.IV"

    let seed = load(withKey: KeychainService.keySeed)
    let IV = load(withKey: KeychainService.keyIV)

We try some plugins but still not getting any value :
We try : Ionic Native - Keychain

  this.keychain.get("***.***.app.key.Seed")
    .then(value => console.log('Got value', value))
    .catch(err => console.error('Error getting', err));
})

Value : null

We try with Storage - Ionic Framework with the keys() function, but also there not available to find any keys (KeyChain) from our project.

What am I missing?

Thanks

1 post - 1 participant

Read full topic

Unable to detect emulator & won't open Android studio

$
0
0

Hi.

It seems after the latest update that running ionic capacitor run android -l --external won’t open Android Studio but runs directly from the terminal.

The problem is that it doesn’t recognise the emulator as a target devices and only recognises a real device. I tried to find if there is a way to use it like before, but I can’t find anything on Ionic/Capacitor docs or elsewhere.

Does anyone have any idea about this?

Thanks.

Results from ionic info:

Ionic:

   Ionic CLI                     : 6.16.1 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.7
   @angular-devkit/build-angular : 12.0.1
   @angular-devkit/schematics    : 12.0.1
   @angular/cli                  : 12.0.1
   @ionic/angular-toolkit        : 3.1.1

Capacitor:

   Capacitor CLI      : 3.0.0
   @capacitor/android : 3.0.0
   @capacitor/core    : 3.0.0
   @capacitor/ios     : 3.0.0

Utility:

   cordova-res : 0.15.3
   native-run  : 1.3.0

System:

   NodeJS : v16.2.0 (/usr/bin/node)
   npm    : 6.14.13
   OS     : Linux 5.12

1 post - 1 participant

Read full topic

What is happen with ionic new projects?

$
0
0

Hi pals
I am having serveral troubles starting projects on Ionic. Projects starts leaving errors in package.json dependencie versions. It proposed me to run npm install with --force or another parameter that I don’t remember right now. The problem left solved apparently but remains 43 moderate vulnerabilities. If I install modules I have to run npm install after in orther to update dependencies; after that I have to run npm audit fix --force.
If I forget to do some step then any module like AndroidPermissions or DeviceAccounts for instants throw an error message about missing properties.

please, anyone has begun an ionic project and had the same troubles? Starting projects is a harder process…

1 post - 1 participant

Read full topic

Printer plugin with react

$
0
0

Hi, I’m trying to use the printer plugin with react, but nowhere can see a demo code.
Anyone can help me please?
Thanks

1 post - 1 participant

Read full topic


Help with auto redirection

$
0
0

I need help. i am new to Ionic Vue, i at an intermediate level in PHP. I am trying to learn how i can implement a simple project. I AM TRYING TO MAKE IT SIMPLE

  1. Create a login page,
      <form @submit.prevent="submitForm">  
          <ion-input type="text" placeholder="Username" v-model="username" required />
            <br />
          <ion-input type="password" placeholder="Password" v-model="password" required />
            <br />
          <ion-button type="submit" expand="block" shape="round">Login</ion-button>
          <button class="forgot"> Forgot Password? </button>
       </form>
  1. after a user clicks the submit button, then call an API to verify the details with my MySQL server
data() {
    return {
      username: null,
      password: null,
      serverResponse: []
    };
  },

methods: {
    submitForm() {
      this.AuthenticateWithServer([this.username, this.password]);
    }, 

    async AuthenticateWithServer(inputs) {
      try {
        const result = await axios.get(`https://127.0.0.1/api/authenticate.php?phone=${inputs[0]}&password=${inputs[1]}`);
        this.serverResponse = result.data; 
        switch(this.serverResponse['result']){
          case 200:
            this.loginSuccessful();
            break;
          case 400: 
            this.showToast("Oops! it seems you have entered wrong username or password");
            break;
          case 500: 
            this.showToast("Oops! please provide your details to login");
            break;
        }
      } catch(e) {
        this.showToast("Seems you are not connected to Internet");
      }  
    },

  1. if the response is “200”, I want to redirect to another page, say, dashboard. so on the in loginSuccessful(), i am calling this code but its not working
loginSuccessful() {
      this.$router.push('/pages/dashboard');
    },

but it’s redirecting even if the response is 200…

Please help, how can i do it better

1 post - 1 participant

Read full topic

Ionic time countdown for selected time

$
0
0

First of all thanks for this post:-

I just started working on ionic. This is fantastic to work with this technology. But today I got stuck when I was try to creating a time countdown.

Scenario 1:- Simple countdown : Initialize inside ionViewDidEnter() works great!

.ts file

>  ionViewDidEnter() {   
>     //Call start timer function 
>     this.remainingTime = 50;
>     this.startTimer();
>   }

> startTimer() {   
>     var counter = setTimeout(() => {
>       var time = this.getTimerClock(this.remainingTime);
>       console.log(time);
>       if (this.remainingTime > 0) {
>         this.startTimer();
>         this.remainingTime--;
>       }
>       else {
>         clearInterval(counter);
>       }
>     }, 1000);
>   }

  getTimerClock(inputSeconds: number) {
    var sec_num = parseInt(inputSeconds.toString(), 10);
    this.remainingTime = sec_num; //Define variable
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);
    var hoursString = '';
    var minutesString = '';
    var secondsString = '';
    hoursString = (hours < 10) ? "0" + hours : hours.toString();
    minutesString = (minutes < 10) ? "0" + minutes : minutes.toString();
    secondsString = (seconds < 10) ? "0" + seconds : seconds.toString();  
    return hoursString + ':' + minutesString + ':' + secondsString;
    }

Result:-

00:00:50
00:00:49
00:00:48...

Scenario 2:- I want to show in html page on the basis of value so I did:-

HTML inside ngFor I am calling function initTimer().

{{initTimer(post.remainingSeconds)}}

In .ts file, I add

//Initialize timer function
  initTimer(inputSeconds: number) {
    return this.getTimerClock(inputSeconds);
  }

Then result is:- (7) 02:48:12…

Now there are two problems:-

  1. counter not working:- Looks like initTimer() initializing values again and again. Any solution?
  2. How can we use this counter in html?

1 post - 1 participant

Read full topic

How to upload a image with form data in ionic angular 11

$
0
0

Can anyone share a link which tells me how to upload a image with form data in ionic/angular

2 posts - 2 participants

Read full topic

Reference Vue store from Capacitor listener

$
0
0

Hello,

I have a Vue js app and I am using a Capacitor plugin to capture an event in the application - “appUrlOpen” by defining a listener.
This works well and is defined as below : -

In my User.vue

<script>
import { Plugins } from "@capacitor/core";
const { App } = Plugins;
.
.
beforeCreate() {
    if (isPlatform("hybrid")) {
      App.addListener("appUrlOpen", function (data) {
        console.log("Inside listener works well : " + data.url);
        this.$store.dispatch("setUrl", data.url);
      });

    }

  },
.
.
</script>

Now the problem is I am not able to get hold of the $store as it is always undefined, which means my ‘this’ is not referencing to my Vue app.

How can I update the values in the Vue store from within the listener function ?

Thank you.

2 posts - 2 participants

Read full topic

Accessing an environment variable to recognise if deployed on Mobile App or Web App?

$
0
0

Hi I am using Ionic 5 with Angular. I have a mobile app that I am currently developing a Web App for that uses the same codebase as the mobile app.

I’m looking for a way to configure some environment variables to recognise if the app is deployed on Mobile App or Web App. Thanks :slight_smile:

1 post - 1 participant

Read full topic

Viewing all 49399 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>