Hi, I am trying to use latest ionic v6 with angular material v13 (latest and greatest for everything ). I have a page where I am using Ionic modal combined with datepicker controls where I am facing this weird issue.

I found out that whenever I opens the datepicker (basically anything using overlay, same with the angular material menu), the first input from the ion-modal get focused. After I tested it, it happens for both mat-datepicker and mat-menu.

I am not quite sure whether it is an issue from Angular Material or Ionic. Hope I can get some help here.

I created something on stackblitz. The UI does look weird since somehow I cannot get the style (new stackblitz user…) but it gives the idea. Basically when you click on either datepicker or menu, the first input gets focused in ionic modal.

Here is the link to the Stackblitz: Angular Ivy (forked) - StackBlitz

Not sure how to resolve this issue. Please assist…

Thanks!!

1 post - 1 participant

Read full topic

We are using Ionic capacitor framework and the problem. we can’t seem to access or see the set-cookie of the header. But i can see it in the Browsers Network Tab. We have also added and http Interceptor with the following code
request = request.clone({
withCredentials: true
});
Still we are having issues. Any help would be great!

1 post - 1 participant

Read full topic

I’m using Call Number plugin to make a phone call from ionic app it is working fine if the caller number is 10 digit or more.
this.callNumber.callNumber(“18001010101”, true)
.then(res => console.log(‘Launched dialer!’, res))
.catch(err => console.log(‘Error launching dialer’, err));

But my requirement is to dial a emergency number “108” which is 3 digit. the problem is the call number plugin is not working for 3 digit number.

this.callNumber.callNumber(“108”, true)
.then(res => console.log(‘Launched dialer!’, res))
.catch(err => console.log(‘Error launching dialer’, err));

1 post - 1 participant

Read full topic

I have successfully generated Android library file(.aar) from IONIC/Cordova application to reuse the third party application. But while running the third party app, getting Class not found exception for all Cordova plugins.

Can any one tell the method to declare all the plugin dependencies in other Android app?

build.gradle file in Third party app

allprojects {
    repositories {
        google()
        mavenCentral()
        jcenter() // Warning: this repository is going to shut down soon
        flatDir {
            dirs 'libs'
        }
    }
}
dependencies{
    implementation files('libs/android-debug.aar')
    implementation files('libs/cordova.jar')
    implementation fileTree(dir: 'libs', include: ['*.jar, *.aar'])
}

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        Intent intent = intent = new Intent(this, com.sd.app.MainActivity.class);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        this.startActivity(intent);
    }
}

1 post - 1 participant

Read full topic

Hello everyone,
ionic v6
angular v11

I have this code:

<ion-content>
  <ion-segment (ionChange)="segmentChanged($event)" value="list">
    <ion-segment-button value="list">
      <ion-label>
        List
      </ion-label>
    </ion-segment-button>
    <ion-segment-button value="card">
      <ion-label>
        Card
      </ion-label>
    </ion-segment-button>
  </ion-segment>
  <ion-list class="animate__animated animate__slideInUp animate__fast" *ngIf="segment === 'list'">
    <ion-item *ngFor="let item of arr; let index = index">
      <ion-label>Item {{ index + 1 }}</ion-label>
    </ion-item>
  </ion-list>
  <div class="animate__animated animate__slideInUp animate__fast" *ngIf="segment === 'card'">
    <ion-card *ngFor="let item of arr; let index = index">
      <ion-card-content>
        <h2>Card {{ index + 1 }}</h2>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>

When I emulate this code on android studio, and I change my current segment to another one, nothing happened…
My content does’nt change.

DO you know why?

1 post - 1 participant

Read full topic

Hi, I want to disable swiper back only on home page and work in other pages.
i tried in home.page.ts

private routerOutlet: IonRouterOutlet
ionViewDidEnter() {
    this.routerOutlet.swipeGesture = false;
  }

  ionViewWillLeave() {
    this.routerOutlet.swipeGesture = true;
  }

but it does not work and disabled in whole app.

please help me to fix this thanks

1 post - 1 participant

Read full topic

Hi, I’ve been trying to disable the default SplashScreen, but I can’t get it to go away.
Following the Capacitor 3.0 config, I have tried the following:

import { Platform } from '@ionic/angular';
import { Plugins } from '@capacitor/core'
const { SplashScreen } = Plugins;

export class AppComponent {
  constructor(private platform: Platform) {

    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(async () => {
        SplashScreen.hide();
    });
}
  ngOnInit() {
  }
}

But didnt work, and this is my SplasScreen config:

"SplashScreen": {
            "launchAutoHide": false,
            "androidScaleType": "CENTER_CROP",
			"launchShowDuration": 0,
            "splashFullScreen": true,
            "splashImmersive": false,
            "backgroundColor": "#ffffff" 
        }

Can anyone know why it is?

1 post - 1 participant

Read full topic

when I launch my app I have this error:

SyntaxError: Unexpected token ‘?’ vendor.js:971.

this only happen on iOS 12.5.5. and iPhone 6, I tested in iPhone 8 and iOS 14.6 and doesn’t happened.

Any idea ?

My package.json:

{
  "name": "",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/architect": "^0.1200.5",
    "@angular/common": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@angular/forms": "~12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "@awesome-cordova-plugins/camera": "^5.39.0",
    "@awesome-cordova-plugins/core": "^5.37.1",
    "@awesome-cordova-plugins/file": "^5.37.1",
    "@awesome-cordova-plugins/local-notifications": "^5.39.0",
    "@awesome-cordova-plugins/network": "^5.38.0",
    "@awesome-cordova-plugins/screen-orientation": "^5.38.0",
    "@ionic-native/android-permissions": "^5.36.0",
    "@ionic-native/core": "^5.36.0",
    "@ionic-native/crop": "^5.36.0",
    "@ionic-native/geolocation": "^5.36.0",
    "@ionic-native/ionic-webview": "^5.36.0",
    "@ionic-native/keyboard": "^5.36.0",
    "@ionic-native/location-accuracy": "^5.36.0",
    "@ionic-native/splash-screen": "^5.36.0",
    "@ionic-native/status-bar": "^5.36.0",
    "@ionic/angular": "^5.5.2",
    "@ionic/storage-angular": "^3.0.6",
    "@ngrx/store": "^13.0.2",
    "@ngrx/store-devtools": "^13.0.2",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "ajv": "^6.12.6",
    "cordova": "^11.0.0",
    "cordova-android": "^10.1.1",
    "cordova-ios": "^6.2.0",
    "cordova-plugin-android-permissions": "^1.1.3",
    "cordova-plugin-badge": "^0.8.8",
    "cordova-plugin-crop": "^0.4.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-geolocation": "^4.1.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-local-notification": "^0.9.0-beta.2",
    "cordova-plugin-network-information": "^3.0.0",
    "cordova-plugin-request-location-accuracy": "^2.3.0",
    "cordova-plugin-screen-orientation": "^3.0.2",
    "cordova-plugin-splashscreen": "^6.0.0",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.5",
    "es6-promise-plugin": "^4.2.2",
    "ios-deploy": "^1.11.4",
    "ios-sim": "^9.0.0",
    "jetifier": "^2.0.0",
    "leaflet": "^1.7.1",
    "rxjs": "^6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.1",
    "@angular-eslint/builder": "~12.0.0",
    "@angular-eslint/eslint-plugin": "~12.0.0",
    "@angular-eslint/eslint-plugin-template": "~12.0.0",
    "@angular-eslint/template-parser": "~12.0.0",
    "@angular/cli": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@angular/language-service": "~12.0.1",
    "@ionic/angular-toolkit": "^4.0.0",
    "@types/core-js": "^2.5.5",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "cordova-plugin-androidx-adapter": "^1.1.3",
    "cordova-plugin-camera": "^6.0.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.2.4"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-geolocation": {
        "GPS_REQUIRED": "true"
      },
      "cordova-plugin-request-location-accuracy": {
        "PLAY_SERVICES_LOCATION_VERSION": "16.+"
      },
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-crop": {},
      "cordova-plugin-file": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-screen-orientation": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-local-notification": {},
      "cordova-plugin-camera": {
        "ANDROIDX_CORE_VERSION": "1.6.+"
      },
      "cordova-plugin-androidx-adapter": {}
    },
    "platforms": [
      "ios",
      "android"
    ]
  }
}

1 post - 1 participant

Read full topic

I tried hard to make the segment feature with swipe gesture (left and right) work, but no success. Could it be a bug or I have not done it correctly? Any help is appreciated.

  <ion-segment swipe-gesture="true" value="x" [(ngModel)]="segmentModel">
    <ion-segment-button value="x">
      <ion-label>X</ion-label>
    </ion-segment-button>
    <ion-segment-button value="y">
      <ion-label>Y</ion-label>
    </ion-segment-button>
    <ion-segment-button value="z">
      <ion-label>Z</ion-label>
    </ion-segment-button>
  </ion-segment>

Ionic CLI: 6.11.0
Ionic Framework: @ionic/angular 5.6.12
@angular-devkit/build-angular: 0.803.29
@angular-devkit/schematics: 8.1.3
@angular/cli: 8.3.29
@ionic/angular-toolkit: 2.3.3

1 post - 1 participant

Read full topic

I have the following code for rendering my checkboxes:

  <ion-list-header>
        <ion-label>Reason</ion-label>
    </ion-list-header>
    <ion-item v-for="entry in form" :key="entry.val">
        <ion-label class="ion-text-wrap">{{ entry.text }}</ion-label>
        <ion-checkbox
            slot="end"
            v-model="entry.isChecked"
            @update:modelValue="entry.isChecked = $event"
            :modelValue="entry.isChecked">
        >
        </ion-checkbox>
    </ion-item>
</ion-list>

Now I have in the data a form object which fills the checkboxes, and also a empty array where I want the values to be stored:

    return {
    
        settings: {
            checkboxes: [],
        },
        form: [
            { val: "valone", text:"Text 1", isChecked: false },
            { val: "valtwo", text:"Text 2", isChecked: false },
            { val: "valthree", text:"Text 3", isChecked: false },
            { val: "valfour", text:"Text 3", isChecked: false },
            { val: "valfive", text:"Text 3", isChecked: false },
        ]
    };

But I don’t know how to get the values of the checked checkboxes to the data array. Maybe I should not save in the array. Anyone know how to save these values?

1 post - 1 participant

Read full topic

Norton is a trusted program that beefs up the online security for your data and device. It keeps your device digitally protected. You can install Norton on your device in order to protect it from digital threats. Give your smartphone and PC protection with Norton. Norton comes with several top-notch security features that keep credit card details, important passwords, and other sensitive data totally safe. It offers a real-time detection feature, password manager, secure VPN, and parental controls. In order to become digitally safe and secure in today’s modern world, you can download, install and activate Norton on your device by going to the website My Norton - Login | Manage, Download or Setup an Account.
visit: https://ussetnorton.com/
https://nort0n1.com/

1 post - 1 participant

Read full topic

Hello!

Im using Ionic version 6 and Capacitor 3… and when im creating an staggered list animation, iOS blocks touch events while the list is animating… is it possible to perhaps set a global setting of allowUserInteraction = true, while animating?..

https://developer.apple.com/documentation/uikit/uiviewanimationoptions/uiviewanimationoptionallowuserinteraction

1 post - 1 participant

Read full topic

Hello,
Im trying to make ionic input height of 40px,
I have a structure like so:

<IonItem fill="outline" >
    <IonLabel position="floating">
        Some label
    </IonLabel>
    <IonInput
        value={value}
        onIonChange={onChange}
    />
</IonItem>

i was Trying to set the css like this:

ion-item,
ion-input {
  height: 40px !important;
  --min-height: 0;
  padding: 0 !important;

  input {
    height: 16px !important;
    min-height: 0 !important;
    padding: 0 !important;

  }
}

but the floating label when there is no text, is moving loo low and sitting on the bottom border. I was trying different approaches but couldn’t make it work and there are no useful info in the docs.

Please help me, I’ll be grateful

1 post - 1 participant

Read full topic

Hello All.

I always use in IonAlert the mode=“ios” but what happens when the app runs in an android devices. Does it works in mode ios? or it will use mode “md”? or it wont work?
I would like it to work in android with ios mode because it is better visually

Thanks in advance.

2 posts - 2 participants

Read full topic

i have avi file in local file directory
file:///storage/emulated/0/ionic_download/2022-02-07/18/18-59-32.avi
but the problem is that I want to play video with above file path.

data[i].toURL() is above file path

• html

 <video controls autoplay width="{{top_box_width}}" height="{{top_box_height}}">
        <source [src]="play_path" type="video/mp4">
        
      </video>

• .ts

let myURL = normalizeURL(data[i].toURL() ) + "#t=0.1";
          console.log("222"+myURL);
          let savePath = this.sanitizer.bypassSecurityTrustResourceUrl(data[i].toURL());
          this.play_path = myURL

both myURL and savePath is not playing video…
how can I play video?
thank you

1 post - 1 participant

Read full topic

Please describe the questio Tried to print page in ionic app, I Have used ionic version 6. It works on ionic lab. But when we try to run on android phone it is not working. The code I Used was :

Print(){
Window.print();
}

1 post - 1 participant

Read full topic

I need to build my apps for ios but I only have a notebook with 16g of ram that has windows installed.

Is it possible to use combo virtual box, macOs, Xcode etc with any efficiency to build my applications for ios?

If yes, could you support me on this?

I am currently using ionic v4.

1 post - 1 participant

Read full topic

Can anyone share how can I protect my iphone 13 camera?

1 post - 1 participant

Read full topic

Good day. Could anybody suggest please how to solve this problem?

TLS connection could not be established: javax.net.ssl.SSLHandshakeException: java.security.cert.CertPathValidatorException: Trust anchor for certification path not found

I use…

Ionic:

   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.803.10
   @angular-devkit/schematics    : 8.3.10
   @angular/cli                  : 8.3.10
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.3, (and 26 other plugins)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (C:\Users\anton\AppData\Local\Android\Sdk)
   NodeJS            : v12.15.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.13.4
   OS                : Windows 10

I add to config.xml

<preference name="AndroidBlacklistSecureSocketProtocols" value="SSLv3,TLSv1" />

My function:

 post(link, data): Promise<any> {
    return new Promise((resolve, reject) => {
      if (this.isOnline()) {

        data = Object.assign(data, {rnd: new Date().getTime()});

        if (this.debug_mode) {
          console.log("datadata", data);
        }

        let params = " params: ";
        for (let field in data) {
          if (field == "p") {
            params += " p:*****"
          }
          else
            params += " " + field + ":" + data[field];
        }

        if (this.debug_mode) {
          console.log('data_params', data);
          console.log("params", params);
        }

        this.logProvider.writeLog("RETRIEVE: start post on link " + link + " " + params);

        this.http.sendRequest(link,
            {
              method: 'post',
              data: data,
              timeout: 30000
            }
        ).then(result => {

          // prints 200
          console.log(result.status);


          try {
            result.data = JSON.parse(result.data);
            // prints test
            console.log(result.data.message);
          } catch (e) {
            console.error('JSON parsing error');
          }

          this.logProvider.writeLog("RETRIEVE: finish post on link " + link);

          if (this.debug_mode) {
            console.log("result.data", result.data);
          }

          //console.log("result", result);
          resolve(result.data);

          // prints 200
          console.log(result.status);
        }).catch(err => {

          // A client-side or network error occurred. Handle it accordingly.

          if (this.debug_mode) {
            console.log('An error occurred post:', err);
          }

          this.logProvider.writeLog("ERROR: error in answer from server " + err.error + " status " + err.status + " link " + link + params);

          reject(err.error);

          // prints 403
          console.log(err.status);

          // prints Permission denied
          console.log(err.error);
        });


     
      } else {
        this.logProvider.writeLog("going to post on link " + link + " but device is offline");
        reject({text: "device is offline"});
      }

    });
  }

1 post - 1 participant

Read full topic

Hello Ionic community!

I have a quick question regarding Ionic PWAs.

Are there any build hooks I can use that are specific to the PWA target?

I’d like to add a hook just for building the PWA version of the app that updates the base href (for Firebase deployment), so I don’t have to do this manually every time. I don’t want this hook script to run for the IOS or Android builds, just PWA. Is this possible?

2 posts - 1 participant

Read full topic