@ArinaAmir wrote:

Hello.
I need to add maxLength to my AlertController input field, which has type text, however type text has no default property [max] or [min] so I have used this approach to achieve this

{
placeholder: ‘Name’,
name: ‘groupName’,
type: ‘text’,
id: ‘maxLength6’,
},

await alert.present().
then(maxLength6 => { document.getElementById(‘maxLength6’).setAttribute(‘maxlength’, ‘6’); });

This works fine on simulator Androis/iOS and in browser, but on real devices maxLength is not applied.

Do you have any alternative solution for this issue?

Any help would be appreciated.

Thanks

Posts: 1

Participants: 1

Read full topic

@k215ar wrote:

Hi, as I understand Ionic has predesigned library of UI components.
But is it possible to create an app in Ionic with custom visual design?

Thanks a lot!

Posts: 1

Participants: 1

Read full topic

@aaronksaunders wrote:

Overmindjs and alternative state management library that works with reactjs, vuejs and angular

cover basic login flow with protected routes

blog - https://dev.to/aaronksaunders/user-login-in-react-js-with-overmindjs-g9d
source - https://github.com/aaronksaunders/user-login-overmind-react
video - https://www.youtube.com/watch?v=7u7AQ3YYteg

Posts: 1

Participants: 1

Read full topic

@enesien wrote:

I have an established Cordova app that uses localstorage extensively. After moving to Capacitor, all localstorage data is missing - I’m assuming this is because of the change in url scheme because the data still exists if I downgrade back to the Cordova implementation.

Does anyone know the default scheme for Cordova Android? Or a way to figure out what it is? Then I can configure the Capacitor to use the “old” scheme.

There are some notes about this in the Capacitor docs, but nothing relating specifically to Android Cordova to Capacitor migration.

Posts: 1

Participants: 1

Read full topic

@keber wrote:

Hi,

I can’t get AdMob Free running on my iOS app.
I’m always getting the console error:

Failed to load resource: the server responded with a status of 404 (Not Found)
http://MY-IP-ADDRESS/plugins/cordova-plugin-admob-free/www/admob.js.map

(I anonymized my IP address here).

I’m running the application on an iOS simulator via ionic cordova emulate.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { WebView } from '@ionic-native/ionic-webview/ngx';
import { AdMobFree } from '@ionic-native/admob-free/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    WebView,
    Network,
    AdMobFree,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

admob.page.ts

import { Component, OnInit } from '@angular/core';
import { AdMobFree, AdMobFreeBannerConfig, AdMobFreeInterstitialConfig } from '@ionic-native/admob-free/ngx';

@Component({
  selector: 'app-admob',
  templateUrl: './admob.page.html',
  styleUrls: ['./admob.page.scss'],
})
export class AdmobPage implements OnInit {

  constructor(
    public admob: AdMobFree
  ) { }

  ngOnInit() {
  }

  showBanner() {

    let bannerConfig: AdMobFreeBannerConfig = {
      isTesting: true, // Remove in production
      autoShow: true
      //id: Your Ad Unit ID goes here
    };

    this.admob.banner.config(bannerConfig);

    this.admob.banner.prepare().then(() => {
      // success
    }).catch(e => console.log(e));

  }

  launchInterstitial() {

    let interstitialConfig: AdMobFreeInterstitialConfig = {
      isTesting: true, // Remove in production
      autoShow: true
      //id: Your Ad Unit ID goes here
    };

    this.admob.interstitial.config(interstitialConfig);

    this.admob.interstitial.prepare().then(() => {
      // success
    });

  }

}

admob.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>admob</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content color="dark">

<ion-button (click)="showBanner()" expand="block" fill="clear" shape="round">
  Click me
</ion-button>

<ion-button (click)="launchInterstitial()" expand="block" fill="clear" shape="round">
  Click me
</ion-button>

</ion-content>

Nothing happens if I execute showBanner() or launchInterstitial().
Also, if I do a console.log in the function this.admob.banner.prepare(), nothing happens, it’s somehow not executed. I also tried adding my ID, but this also didn’t work.

Does anybody know how to fix this?
I’m using the latest Ionic 5 with the latest plugins.

Thank you in advance!

Posts: 1

Participants: 1

Read full topic

@metelikk wrote:

Hi. I am developing app with ionic v4, Angular 7.

"@ionic/angular": "^4.11.5"

My application contains tabbar (ion-tabs). Each tab is a different angular component/page with onPush strategy which contains ion-list with ion-item-sliding(which cause issues) .
I have a default list data which kept in local storage and must be shown while relevant one is retrieving from DB (using async pipe). Request to DB happens on tab switch.
So my issue is that it doesn’t build ion-list from default list data with ion-item-sliding items, at the same time ion-list with common ion-items everything is okay and ion-list has been built firstly with data from local storage and later from DB.
I used detectChanges and markForCheck, which didn’t help.
Please any help.

Posts: 1

Participants: 1

Read full topic

@samuelv wrote:

Hello !

I have a problem with the display of my ionic app.

When i run my app in my browser, I have this display, which looks outdated :

Capture371×796 12.4 KB

And when i refresh the page, I have the good display:

Capture1371×791 13.7 KB

How can I do to not have to refresh to have the good display ? Because we can’t refresh on real device ahah
Thank’s in advance.

Samuel

Posts: 1

Participants: 1

Read full topic

@Emiliano74 wrote:

Using Ionic Hub, after three APPs created, when trying to create the certificates for the fourth APP, the apple developer page says that the maximum number of certificates generated was reached.
Do I have to delete the previous certificates? but would you be losing the certificates of the previous APPs? if I want to make changes to them?
Does anyone know anything about it?

Thank you!!!

Posts: 1

Participants: 1

Read full topic

@ibpeco wrote:

Hi everyone,

I created a PWA with ionic/angular. An API in PHP to set/retrieve the data.

In my localhost: everything works fine.
I move the API to the server: With Postman, all the calls works fine
Now I change the URL in Ionic from the localhost to the internet server: Doesn’t work

Error message: “SQLSTATE[HY000] [1045] Access denied for user ‘userXX’@‘xxx.xx.xxx.249’ (using password: YES)”

I checked the MySQL permissions in the server, no problem.

Why with Postman it work, in the same server address, but not in Ionic?

Thanks in advance

Posts: 1

Participants: 1

Read full topic

@Rashadab wrote:

I am currently using pdf viewer to display pdfs. I would like to add a feature to search for a text in multiple pdf document at once.
Is there any plugin that allows that? Or any idea on how to make that happen?

Posts: 1

Participants: 1

Read full topic

@dcascante wrote:

How to implement a custom transition between views?

Something similar to the properties " enterAnimation" and " leaveAnimation" in the Modal but for a single view transition, not for the entire application.

Options already tried:

1. NavOptions into NavController accepts an “animation” property, but it does not accept a custom animation. Per domcumentation: " The property ‘animation’ understands the following values: md-transition , ios-transition and wp-transition ."

Documentation Link: https://ionicframework.com/docs/v3/api/navigation/NavController/

2. Ionic config accepts a “navAnimation” property, but it does affect the entiry application, not just one page.
   Per Documentation: “Overrides the default “animation” of all ion-nav and ion-router-outlet across the whole application.”

Documentation Link: https://ionicframework.com/docs/angular/config

3. CSS transition: the leaving view is hidded before the transition ends.

4. Ionic v3 Page Transitions: Seems to be deprecated.

Tutorial Link: https://rafalradziszewski.pl/blog/ionic-custom-transitions
Migration Link: How to migrate custom animation to Ionic 4?

5. Angular Animations: After try the example in the Angular guide, got several error related with the " Querying the view containers" (https://angular.io/guide/route-animations#querying-the-view-containers). those error indicates that the “:enter” query returned 0 elements. I supposed that the issue is because in ionic we use the “ion-router-outlet” instead the angular “router-outlet” and the different implementation brokes the animation flow.

Documentation Link: https://angular.io/guide/route-animations

Thanks in advance.

Ionic Info:

Ionic:

Ionic CLI : 6.4.0 (C:\Users\Diego\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : none
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Utility:

cordova-res : 0.10.0
native-run : 0.3.0

System:

Android SDK Tools : 26.1.1 (C:\Program Files (x86)\Android\android-sdk)
NodeJS : v12.16.1 (C:\Program Files (x86)\nodejs\node.exe)
npm : 6.13.7
OS : Windows 10

Posts: 1

Participants: 1

Read full topic

@Shola wrote:

Hello guys , i am having issue with how to disable the back-button hardware. i only want it to work on the homepage of my app and not other pages. it works well when you are on the homepage but also works on every other page that opens. i want users to be able to use the back button on all the pages except the homepage.
This is my code

 deactivateBackButton()
  {
     this.subscribe = this.platform.backButton.subscribeWithPriority(666666,()=>{
     if (this.constructor.name == "HomePage") {
       if (window.confirm("Do you want to exit app")) {
         navigator["app"].exitApp();
       }
     }
   });
  }

Posts: 1

Participants: 1

Read full topic

@sheikhm wrote:

strikethrough can be shown in browser while it is not reflecting in android apk text-decoration: line-through;

Posts: 1

Participants: 1

Read full topic

@RehanHassan wrote:

I’ve been using ionic-core 4 in my project, everything was working fine, Few days ago, i migrated to ionic5, everything worked great (on latest browsers) after doing some minor changes, but my SideMenu stopped working. I noticed ionic5 implementation(way of use) for SideMenu totally replaced ionic4.

• ionic 4

const menuCtrl = document.querySelector('ion-menu-controller');

function openFirst() {
  menuCtrl.enable(true, 'first');
  menuCtrl.open('first');
}

• ionic 5

<script type="module">
    import { menuController } from '@ionic/core';
    window.menuController = menuController;
</script>

function openFirst() {
    menuController.enable(true, 'first');
    menuController.open('first');
  }

You see, the actual functions are same like open/enable etc but the way you gonna import SideMenu has changed. For some reasons, my (clients) project needs to run on old browsers which dont support import/module.

So is there a way to run ionic5 SideMenu on old browsers too like ionic4 was ???

Posts: 1

Participants: 1

Read full topic

@boka003 wrote:

Hello,

I have build my android version of apk and it is working perfect.
For IOS version i using VM Ware and 10.14.6 mac os.

When i try to build apk, this is error that show up: http://prntscr.com/s1q2ap
If i run ionic cordova platform add ios, here is a full log: http://prntscr.com/s1q3gj , http://prntscr.com/s1q3su

I was also try with this command: http://prntscr.com/s1q361

Is anyone have similar situation?

Thank you!

Posts: 1

Participants: 1

Read full topic

@Pratikjaiswa15 wrote:

Recently I moved from Cordova to capacitor storage API. And I am having a very strange issue. At page1 I am setting 4 values to local storage, but when I access these values on another page, one value is getting displayed as null.

I tried many approaches but value user_id is always null.

I made sure value is getting stored in local storage.

I am also attaching images of console.log after setting and retrieving values from local storage

storage.service.ts

async set(key: string, value: any): Promise<any> {


    if(value == null || value == undefined) {
      console.log("dont'do")
    }
    else {

      try { 
        await Storage.set({
          key: key,
          value: value
        });

        return true;
      } catch (reason) {
          console.log(reason);
          return false;
      }
    }

  }
  // to get a key/value pair
  async get(key: string): Promise<any> {
  try {

    const result = await Storage.get({ key: key });
    console.log('storageGET: ' + key + ': ' + result.value);
    if (result != null) {
    return result.value;
    }
    else {
      console.log("null from service")
      return null;
    }

  } catch (reason) {
  console.log(reason);
  return null;
  }
  }

page1.ts

         this.storageService.set('user_id',data[i].id ).then(val => console.log(val))
         this.storageService.set('email', data[i].email).then(val => console.log(val))

         this.storageService.set('phone_number', data[i].mobile_no).then(val => console.log(val))
         this.storageService.set('firebase_uid', data[i].firebase_uid).then(val => console.log(val))

page2.ts

   this.storageService.get('user_id').then(val => console.log(val))
    this.storageService.get('email').then(val => console.log(val))
    this.storageService.get('phone_number').then(val => console.log(val))
    this.storageService.get('firebase_uid').then(val => console.log(val))

Console.log after setting values

storage1829×492 19.2 KB

console.log after retrieving local storage values

Posts: 1

Participants: 1

Read full topic

@kdefombelle wrote:

I created a new ionic5 project (angular with tabs).
Inside I am trying to open a modal exactly as per the documentation about ion-modal and get:

core.js:6014 ERROR Error: Uncaught (in promise): Error: No component factory found for ModalPage. Did you add it to @NgModule.entryComponents?
Error: No component factory found for ModalPage. Did you add it to @NgModule.entryComponents?
at noComponentFactoryError (core.js:25607)
at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:25683)
at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:25680)
at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:25680)

I did not find any mention in ionic5 breaking changes

I tried with the Modal declared or not in the module, same result.
I am using the default angular version in use when generating a new ionic5 with ionic start

tab2.page.ts

@Component({
  selector: "app-tab2",
  templateUrl: "tab2.page.html",
  styleUrls: ["tab2.page.scss"],
})
export class Tab2Page {
  constructor(public modalController: ModalController) {}

  async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
    });
    return await modal.present();
  }
}

modal.page.ts

@Component({

selector: "modal-page",

})

export class ModalPage {

constructor() {}

}

PS: ionic info

Ionic:

   Ionic CLI                     : 6.6.0 (/Users/me/applications/node-v10.15.3-darwin-x64/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.1
   @capacitor/core : 2.0.1

Utility:

   cordova-res : 0.12.1
   native-run  : 1.0.0

System:

   NodeJS : v10.15.3 (/Users/me/applications/node-v10.15.3-darwin-x64/bin/node)
   npm    : 6.14.4
   OS     : macOS Catalina

Posts: 1

Participants: 1

Read full topic

@Petrean wrote:

Hi everyone,

I have a question regarding this plugin in angular, I am trying to implemented it in Ionic 4 but after I put all the code link to this plugin in index.htnl and also to the image the respective class and it doesn’t seems to work can someone please help me with some guidelines with what I am doing wrong. Thank you.

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>

    <script src="angular-rwdImageMaps.min.js"></script>

    <script type="text/javascript" charset="utf-8">

        angular

            .module("map", ["rwdImageMaps"])

            .controller("MapCtrl", function ($scope) {

                $scope.myTrigger = function (arg) {

                    alert(arg + " clicked");

                };

            });

    </script>

https://github.com/cowglow/AngularJS-rwdImageMaps

Posts: 1

Participants: 1

Read full topic

@Muslimansari wrote:

how to on off airplane mode ionic 3

Posts: 1

Participants: 1

Read full topic

@KLM212 wrote:

Hello guys, I have some decent experience developing websites, for most of them I use twitter bootstrap for the frontend and laravel (php/mysql) for the backend,

Of course, this can’t be directly packaged in a native iOS/Android app so I was thinking on the chance to just wrapping them.

My questions are:

• Is there any con or they will run just the same as in a browser?
• Can Ionic help on this? I researched a bit and if I understand correctly I should use “Cordova” or “Capacitor”, is that correct?
• Como someone please give me a general idea about the workflow? I’ve been trying to get a general idea but I’m still unsure about the role of each actor in the process.

Thanks in advance for any input.

Posts: 1

Participants: 1

Read full topic