Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 70440 articles
Browse latest View live

When (ionchange) of textbox , Ion-select values not loding in HTML page

$
0
0

@Velmurugan wrote:

I have two screens .
login
signup.

  1. In login screen, i am using actionsheet for otp verification.then i am using function for navigation to signup.

login page.

issue in signup page.

  1. In the sign up page , if i am entering pin code , if it valid code it has to load three down below the pincode … I am hidin the three drop down combo usign ngif.
    In console the values are loading but its not loading in HTML.

  2. If am removing the actionsheet , its working fine.
    4.If i am directly navgiting to signup also its loading fine.

here is my code…

login.ts

signIn(phoneNumber) {

const appVerifier = this.recaptchaVerifier;
// this.isApp = !document.URL.startsWith('http');
const phoneNumberString = '+91' + phoneNumber.toString();

firebase.auth().signInWithPhoneNumber(phoneNumberString, appVerifier)
  .then( confirmationResult => {
  console.log('confirmationResult', confirmationResult);
    // SMS sent. Prompt user to type the code from the message, then sign the
    // user in with confirmationResult.confirm(code).
  this.alertwindow(confirmationResult, phoneNumber);

})
.catch((error) => {
  console.error('Please check the mobile number', error);
});

}
async alertwindow(confirmationResult, phoneNumber) {
const prompt = await this.alertCtrl.create({
message: ‘Enter the Confirmation code’,
inputs: [{ name: ‘confirmationCode’, placeholder: ‘Confirmation Code’ }],
buttons: [
{ text: ‘Cancel’,
handler: data => { console.log(‘Cancel clicked’); }
},
{ text: ‘Send’,
handler: data => {
confirmationResult.confirm(data.confirmationCode)
.then((result) => {
// User signed in successfully.
console.log(‘User signed in successfully.’);
console.log(result.user);
console.log(result.user.uid);
console.log(result);
this.storage.set(‘username’, phoneNumber);
this.storage.set(‘userToken’, result.user.uid);
this.getUserStatus(phoneNumber);
// …
}).catch((error) => {
// User couldn’t sign in (bad verification code?)
// …
alert(‘couldnt sign in’);
console.log(error);
});
}
}
]
});
return await prompt.present();
}

public getUserStatus(userData) {
console.log(userData);
this.authService.getUserStatus(userData)
.then(data => {
const value = JSON.stringify(data[0]);
this.response = JSON.parse(value);
console.log( this.response);
console.log( this.response.status);
if (this.response.status === ‘new’) {
this.navCtrl.navigateRoot(’/signup’); // new user
}
if (this.response.status === ‘old’) {
this.storage.set(‘signup’, ‘YES’);
this.storage.set(‘userToken’, this.response.usertoken);
this.storage.set(‘username’, this.response.username);
this.storage.set(‘fullname’, this.response.fullname);
this.navCtrl.navigateRoot(’/tabs’);
}
});
}

Posts: 1

Participants: 1

Read full topic


Converting to Ionic 4, but old Ionic 3 pages appear

$
0
0

@AndrWeisR wrote:

I am converting an existing Ionic 3 app to Ionic 4. The first time I run the app on an Android emulator, I get the new Ionic 4 app. The second time I run the same app, I get the Ionic 3 app!

I did the conversion by starting with a new Ionic 4 starter project, generating new pages etc and then migrating the content into the new pages from the Ionic 3 app.

I build the new app with ionic cordova build android and it generates an APK: platforms/android/app/build/outputs/apk/debug/app-debug.apk

I install the APK on an emulator with adb install -r platforms/android/app/build/outputs/apk/debug/app-debug.apk

Then, as I described, the first time the app runs, it shows the new Ionic 4 app. I know it’s the new app because I’ve added “Ionic 4” to the top nav toolbar. Then if I dismiss the app and run it again, I get the old Ionic 3 app come up instead. It’s not even the current version of the Ionic 3 app - it’s some older version of the app. I don’t know where it’s getting this old source from.

If I uninstall the app and re-install it, I again get the new Ionic 4 app one time only before it goes back to the Ionic 3 app.

I’ve tried:

  • Creating a brand new emulator, so the Ionic 3 app has never been installed on it. No change.
  • Removing and re-adding the android platform. No change.
  • Checked that the pages are definitely only in my project once (so I don’t have version 3 and 4 pages together).
  • Tried debug and release builds. No change.

Any thoughts? I’m running out of ideas.

Posts: 1

Participants: 1

Read full topic

Image is not loading properly from image picker in ionic 4

$
0
0

@Velmurugan wrote:

I am selecting image using image picker .Its not loading on selecting .

The image was selected , but its not showing in screen.

Now i am clicking somewhere (on the red dot) . Now its loading.

here is my code

home.html

    <div>
         <img *ngIf="imageUrl" src="{{imageUrl}}" class="boxmodelImage" />
    </div>     

home.ts

async attachment() {

const actionSheet = await this.actionSheetController.create({
header: ‘Attachment’,
cssClass: ‘myPage’,
buttons: [
{
icon: ‘camera’,
text: ‘Open Camera’,
cssClass: ‘myActionSheetBtnStyle’,
handler: () => {
this.CameraImageUpload();
}
},
{
icon: ‘photos’,
text: ‘Open Gallery’,
handler: () => {
this.GalleryImageUpload();
}

}]
});
await actionSheet.present();
// return this.base64Image;
}

async GalleryImageUpload() {
await this.imagePicker.getPictures({ maximumImagesCount: 1, outputType: 0 }).then((results) => {
for (const item of results) {
console.log(‘Image URI: ’ + item);
this.crop.crop(item, { quality: 100 })
.then(
newImage => {
console.log(‘new image path is: ’ + newImage);
const fileTransfer: FileTransferObject = this.transfer.create();
const uploadOpts: FileUploadOptions = {
fileKey: ‘file’,
fileName: newImage.substr(newImage.lastIndexOf(’/’) + 1)
};

          fileTransfer.upload(newImage, 'http://192.168.1.1:3000/post/uploadImage', uploadOpts)
           .then((data) => {
             console.log(data);
             this.respData = JSON.parse(data.response);
             console.log(this.respData);
             this.imageUrl = this.respData.fileUrl;
           }, (err) => {
             console.log(err);
           });
        },
        error => console.error('Error cropping image', error)
      );
}

}, (err) => { console.log(err); });
}

async CameraImageUpload() {
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
correctOrientation: true,
saveToPhotoAlbum: true,
sourceType: 1
};
await this.camera.getPicture(options).then((imageData) => {
for (const item of imageData) {
console.log(‘Image URI: ’ + item);
this.crop.crop(item, { quality: 100 })
.then(
newImage => {
console.log(‘new image path is: ’ + newImage);
const fileTransfer: FileTransferObject = this.transfer.create();
const uploadOpts: FileUploadOptions = {
fileKey: ‘file’,
fileName: newImage.substr(newImage.lastIndexOf(’/’) + 1)
};

              fileTransfer.upload(newImage, 'http://192.168.1.1:3000/post/uploadImage', uploadOpts)
              .then((data) => {
                console.log(data);
                this.respData = JSON.parse(data.response);
                console.log(this.respData);
                this.imageUrl = this.respData.fileUrl;
              }, (err) => {
                console.log(err);
              });
            },
            error => console.error('Error cropping image', error)
          );
    }
  }, (err) => { console.log(err); });

}

Posts: 1

Participants: 1

Read full topic

Ionic 4 Cart

$
0
0

@Lyhout wrote:

Hello all guy, I’m a fresher with ionic 4 and I have a problem with Cart. Does anyone have any solution with that?

Thank in advance.

Posts: 1

Participants: 1

Read full topic

Ionic 4 mobile back button issue

$
0
0

@rajesh5129 wrote:

am developing an ionic4 app. after logout I am redirecting to the login page by using this.navController.navigateRoot method. to close the app by clicking the mobile back button I used the following code. it worked for a few days after that now I have to release an updated of this app if click on mobile back button it is not closing the app instead it redirecting to the previous open screen. can anyone help me to solve this issue? ionic version: 5.2.3
code:

ionViewDidEnter() {
this.subscription = this.platform.backButton.subscribe(async () => {
navigator[‘app’].exitApp();
});
}

ionViewWillLeave() {
this.subscription.unsubscribe();
}

Posts: 1

Participants: 1

Read full topic

Integrating material design with ionic app

$
0
0

@Taraa wrote:

Hi everyone
I used to work with ionic UI just fine but now for some designing reasons I need to use google material design feature.
so I searched about it and found out about “Angular Material”
My question is: what is the difference between Angular material components and material design and is it possible to integrate material design codes with ionic without having trouble?
thank you in advance

Posts: 1

Participants: 1

Read full topic

E2e testing on mobile device

$
0
0

@breinsnet wrote:

So my project use extensive use of native plugins, file, camera, google maps, and others. Mocking them is a bit of a pain and I was wondering what’s the best strategy to e2e testing.

I haven’t found a lot of examples of on device e2e test… so I suppose is not what most of the people do?

On the other hand, on browser e2e testing is not an option unless I start to mock all these calls.

What are you guys doing out there? Best practices?

I’m using ionic v4

Posts: 1

Participants: 1

Read full topic

Ionic3 Alert with Input Text and Radio Button

$
0
0

@OliverPrimo wrote:

Hello everyone,

I want to create an ionic alert that will have both radio buttons and text inputs. I have three options and if the user chose the third option, an input text will appear and the user needs to type something.

Here is my code and the sample output.

let alert = this.alertCtrl.create({
        title: 'Select one?',
        message: "Please select one or enter something",
        inputs: [
          {
            type: 'radio',
            label: 'Option 1',
            value: 'Option 1',
          },
          {
            type: 'radio',
            label: 'Option 2',
            value: 'Option 2',
          },
          {
            type: 'radio',
            label: 'Other Option',
            value: 'Other Option',
          },
          {
            type: 'text',
            placeholder: 'Enter other option',
          }
        ],
        buttons: [
          {
            text: 'Submit',
            handler: (data: any) => {
              console.log(data);
            }
          }
        ]
      });
      alert.present();

image

I’ve searched on the internet but I can’t find something that can help me with this. I hope someone can help me with this.

Posts: 1

Participants: 1

Read full topic


FileOpener and DocumentViewer are not working

$
0
0

@OliverPrimo wrote:

Hello Everyone,

I created a function that will get the PDF Blob file from the server and save it to phone’s storage. Now, I want the user to be able to open it once the file was downloaded. I tried using FileOpener (cordova-plugin-file-opener2) but it didn’t work without showing any errors. Same with trying the DocumentViewer (cordova-plugin-document-viewer) but it also didn’t work without showing any errors. I am testing the app on an actual mobile phone and tried to alert the error if there’s any since the moblie phone have no consoles but it doesn’t display any errors. I don’t know how to make it work or if there is anything that I can use aside from FileOpener and DocumentViewer. Btw, here are my codes.

FileOpener

              this.fileOpener.open(filePath, 'application/pdf').then(response => {
                this.toastSrvc.presentToast(response);
              })
              .catch(error => {
                this.alertCtrl.create({
                  title: 'Error opening the file',
                  message: error,
                  buttons: [
                    {
                      text: 'Close',
                      role: 'cancel',
                      handler: () => {
                        console.log('Alert Closed!');
                      }
                    }
                  ]
                }).present();
              });

DocumentViewer

this.documentViewer.viewDocument(filePath + 'Vidalia/' + fileName, 'application/pdf', options, this.onShow, this.onClose, this.onMissingApp, this.onError);

  onShow() {
    this.alertCtrl.create({
      message: 'Show'
    }).present();
  }

  onError() {
    this.alertCtrl.create({
      message: 'Error'
    }).present();
  }

  onMissingApp() {
    this.alertCtrl.create({
      message: 'Missing App'
    }).present();
  }

  onClose(){
    this.alertCtrl.create({
      message: 'Close'
    }).present();
  }

I hope someone can help me with this. Thank you in advance :slight_smile:

Posts: 1

Participants: 1

Read full topic

How to pass a parameter while routing to the page using navcontroller in ionic 4

$
0
0

@Velmurugan wrote:

Hi,

I am creating social media application. I need to pass username fullname and usertoken for all the screens. In ionic 3 i used navparams. But in ionic 4 its not supporting.

Please help…

Posts: 1

Participants: 1

Read full topic

Error Routing

$
0
0

@EniolaTade wrote:

Hello guys, i still get this error when trying to route from one page to another.

Error: Cannot match any routes. URL Segment:
tabs/list/profile/DNKagDWuNX8vkXj4pqiB’

How do i solve this please?

Posts: 1

Participants: 1

Read full topic

Onclick on the edit button keyboard should pop up

$
0
0

@premktr wrote:

I am using ionic4/angular. give me a sample code that should pop up the keyboard when the input field is focused or when the edit button is clicked.i have tried many ways including Cordova keyboard plugin and install web-view also but nothing works.is there any module or package i need to install for this thing?

 <ion-input type="text" placeholder="Enter your first name" [readonly]="isReadOnly" name="profile"
              [value]="firstName" #nameCtrl="ngModel" ngModel pattern="[A-Za-z]+" minlength="3" maxlength="20"
              [(ngModel)]="firstName" (focusout)="nameCtrl.valid && out_profile()" #name no-padding>
            </ion-input>
enable_name() {
    this.isReadOnly = false;
    this.keyboard.show();
  }

Posts: 1

Participants: 1

Read full topic

Npm install not running on the build-server

$
0
0

@solojuve1897 wrote:

My app-project is in a sub-folder in my repo so I have a package.json-file in the root with the following scripts:

“scripts”: {
“preinstall”: “cd [dir]/app && sudo npm install --unsafe-perm”,
“install”: “”,
“build”: “cd [dir]/app && npm run build”
}

What’s in preinstall I earlier had in “install”, but I got the same result. The issue is the following:

[00:21:05]: Installing Dependencies
[00:21:05]: $ npm install --quiet --no-optional
[00:21:06]: ▸ npm WARN lifecycle app@0.1.0~preinstall: cannot run in wd app@0.1.0 cd [dir]/app && sudo npm install --unsafe-perm (wd=/builds/solojuve1897/musse)

[dir] = only masking the real path.

I would like to point out that the scripts works fine on my local machine.

Any ideas?

Posts: 1

Participants: 1

Read full topic

FileUploadOptions cannot include request body

Ionic Package is not signing my Android debug builds

$
0
0

@ZaLiTHkA wrote:

Greetings…

I’m running into the all too common “Blocked by Play Protect” issue when I try install an APK directly on each of my local Android testing devices. I’ve been trying to fix this issue for over a week now and I’m still having no luck here.

Note: Just in case this is relevant, please note that I am building an Ionic 3 app, which requires cordova-cli@8.1.0. So I have implemented the cordovaOverride.sh steps described the Appflow docs FAQ section.

One interesting and perplexing point with the cordova build android command though:

  • local build with no keystore file specified: install succeeds.
  • local build with specifying a keystore file: install succeeds.
  • Ionic Package build: install fails.

Checking each of these three APK files with jarsigner -verify -certs -verbose, I see the following key points:

  • local build with no keystore file specified: includes the internal default values for C, O and CN.
  • local build with specifying a keystore file: includes the relevant values for CN, OU, O, L, ST and C as set for the relevant certificate in my keystore.
  • Ionic Package build: includes the internal default values for C, O and CN.

Looking at the Ionic Package build log pages, my iOS development builds show the “development” Security Profile in the right side bar (as I expect) but my Android development builds do not, despite having uploaded my Android keystore file to my “development” Security Profile and setting the correct alias and password values.


If I download the Ionic Package binary and sign it using the apksigner.cmd tool from the build-tools included in my Android SDK folder, using the exact same alias and password as I specified in my configuration for the security profile for my app, then it installs without any issue on my local device.

So my biggest question right now is: why does Ionic Package not sign my debug APK using the details I’ve told it to use?

Note: I only have a “Starter” Appflow subscription, so I cannot use the CLI to request a build with a specific Security Profile, I have to do this through the web UI.

Posts: 1

Participants: 1

Read full topic


In-app browser error in ios build

$
0
0

@cikcoh wrote:

       @ionic-native/in-app-browser/index.ts(233,2): Error during template compile of 'InAppBrowser' Only 
        initialized variables and constants can be referenced in decorators because the value of this variable is 
        needed by the template compiler in 'Plugin' 'Plugin' references 'Plugin' 'Plugin' is not initialized at 
        @ionic-native/core/decorators/interfaces.ts(100,22). 

Works fine when building android apk.

Posts: 1

Participants: 1

Read full topic

Responsive vertical

$
0
0

@ionicProgrammer wrote:

Bonjour,
Je réalise des maquettes en ionic, j’ai une question a propos de la responsive verticale lorsque je réalise une interface si je l’essaye sur le device galaxy Not 2c marche tres bien lorsque je change vers pixel 2 on la a hauteur qui s’agrandit et du coup tous les elements se placent en haut. comment gérer ca ? j’ai besoin de vos conseils
merci d’avance

Posts: 1

Participants: 1

Read full topic

ionic 4 custom styling confusion

How to filter multiple data using cloud firestore in Firebase

$
0
0

@santosgust01 wrote:

Hi everybody, I’m developing an aplication using cloud firestore of firebase and I need to make a dynamic filter using an ion-select with multiple values as in checkbox. The firestore have a tool to make simple and compound queries using the where function (https://firebase.google.com/docs/firestore/query-data/queries) , but I need something more dynamic so that the user can filter one or several values in different fields ​​using the same logic of the code.
Some help?

Posts: 1

Participants: 1

Read full topic

Camera Plugin

$
0
0

@arulyan wrote:

Can someone help me understand the ionic-native camera plugin code…

import { Camera, CameraOptions } from '@ionic-native/camera';

constructor(private camera: Camera) { }

...


const options: CameraOptions = {
  quality: 100,
  destinationType: this.camera.DestinationType.FILE_URI,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE
}

this.camera.getPicture(options).then((imageData) => {
 // imageData is either a base64 encoded string or a file URI
 // If it's base64 (DATA_URL):
 let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
 // Handle error
});

Posts: 1

Participants: 1

Read full topic

Viewing all 70440 articles
Browse latest View live


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