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

Updating Ionic/Angular breaks and header on PWA


How to conditionally set root page in Ionic 5

$
0
0

@jairoareyes wrote:

Hello,

Using Ionic 5.4, I want to set root page based on some condition while first app initialization.

I’m using Firebase to autenticate users, so I want to redirect to TabsPage when user is already logged, and to StartPage when is not logged.

I’m trying to set the rootPage on the app.component.ts as follow:

rootPage:any = ‘StartPage’;

and in initializeApp():

this.authSvc.Session.subscribe(session=>{

    if(session){

        this.rootPage = 'TabsPage';

    }

      else{

        this.rootPage = 'StartPage';

      }

  });

I took this example for a forum of ionic V4

Thanks

Posts: 1

Participants: 1

Read full topic

How to export my page

Ion-card-content

$
0
0

@imfairozkhan wrote:

Hi,

im pretty new to ionic framework. im using ionic 4.

how do scroll the contents in ion-card-content only.

i dont want to scroll the whole ion-card, only ion-card-content should be scroll able. ion-card-content will have a ion-label or ion-text.

please suggest me.

Regards

Posts: 1

Participants: 1

Read full topic

Onesignal push notification

$
0
0

@lsantaniello wrote:

Hi all,
I need to configure my app to receive only segmented (or category) notification but I don’t understand how can I do it. Could you please help me?

    var notificationReceidedCallback = function (jsonData) {
      console.log('notificationReceidedCallback: ' + JSON.stringify(jsonData));
    };

    var notificationOpenedCallback = function (jsonData) {
      console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData));
    };

    window["plugins"].OneSignal
      .startInit(FIREBASE_APP_ID, FIREBASE_SENDER_ID)
      .handleNotificationOpened(notificationOpenedCallback)
      .handleNotificationReceived(notificationReceidedCallback)
      .endInit();

Thanks

Posts: 1

Participants: 1

Read full topic

iOS Device Debugging

$
0
0

@andyhb wrote:

I have just purchased a Mac to allow me to deploy my application to the Apple Store and have no experience of this OS so everything is a learning exercise at the moment.

I have managed to get my app building and I can even open it up in X-Code and I can deploy to a simulator or an Apple device connected to my machine via a USB lead.

I simply cannot get debugging working, after using VSCode with Android on a Windows machine that process is great and works faultlessly with the Apple environment it seems to be a right mess!

I don’t get any typescript files appearing in my Resources window in Safari and I don’t get any errors or console messages appearing either.

Can anybody help me out here, my app is failing but I have no way of debugging what is going on???

Posts: 2

Participants: 2

Read full topic

Ionic select CompareWith

$
0
0

@VigneshBalakrishnan wrote:

compareWith is not properly working for multiselect select. I not sure whether I’m using it properly or not . Kindly any one have knowledge in that help me. Thanks in advance

<ion-select multiple [compareWith]=“compareWithFn” name=“myLanguage” [(ngModel)]=“myLanguage”>
<ion-select-option *ngFor=“let l of languages” [value]=“l.id”>
{{ l.name }}

TS:
compareWith: (o1: any, o2: any) => boolean;

this.compareWith = this.compareWithFn;

compareWithFn=(o1, o2) =>{
return o1 === o2;
};

Posts: 1

Participants: 1

Read full topic

FCM notifications on ionic 3 issue

$
0
0

@Scobee wrote:

Hello,
Does anybody have a good way / plugin of adding FCM notifications to an Ionic 3 project ?
Recently, after some updates, I started having this error during compilation:
Dependency failing: com.google.firebase:firebase-messaging:19.0.1 -> com.google.firebase:firebase-iid@[19.0.1], but fire
base-iid version was 20.0.2.

The following dependencies are project dependencies that are direct or have transitive dependencies that lead to the art
ifact with the issue.
– Project ‘app’ depends onto com.google.firebase:firebase-messaging@19.+
– Project ‘app’ depends onto com.google.android.gms:play-services-measurement-api@17.2.2
– Project ‘app’ depends onto com.google.android.gms:play-services-tagmanager@16.0.8
– Project ‘app’ depends onto com.google.firebase:firebase-perf@18.+
– Project ‘app’ depends onto com.google.firebase:firebase-iid@20.0.2
– Project ‘app’ depends onto com.google.firebase:firebase-core@17.+
– Project ‘app’ depends onto com.google.android.gms:play-services-tagmanager@16.+
– Project ‘app’ depends onto com.google.firebase:firebase-config@18.0.0
– Project ‘app’ depends onto com.google.firebase:firebase-config@18.+
– Project ‘app’ depends onto com.google.android.gms:play-services-tagmanager-api@16.0.8
– Project ‘app’ depends onto com.google.firebase:firebase-core@17.2.2
– Project ‘app’ depends onto com.google.firebase:firebase-analytics@17.2.2
– Project ‘app’ depends onto com.google.firebase:firebase-perf@18.0.1
– Project ‘app’ depends onto com.google.firebase:firebase-messaging@19.0.1

I am using the script from here:

Thank you!

Posts: 1

Participants: 1

Read full topic


Ionic backgroung geolocation getting problem

$
0
0

@mitp79 wrote:

npm ERR! code ENOLOCAL
npm ERR! Could not install from “@mauron85/cordova-plugin-background-geolocation@~3.1.0” as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:

Posts: 1

Participants: 1

Read full topic

Run Ionic 4 project on another computer

$
0
0

@Mothbeard wrote:

Hello,

The disk on my computer failed and I had to get it replaced.

Fortunately I got all my data back. Unfortunately I did not back up my project on github. Now I am trying to run my project with my new disk, and is not working. In hindsight I see I should have been using github, but live and learn.

Can someone detail the process to get my project up and running again?

Posts: 1

Participants: 1

Read full topic

Can i call LifeCycle methods in Refresh function

$
0
0

@viswanathb wrote:

Hello

I have a page on which list of people in the array will display if I removed any of them the array is getting updated to reflect that change I’m using DoRefresh function to refresh the page. To update the array i’m using several functions and I wrote them in the IonviewWillenter method. if i’m calling this ionviewillenter in my dorefresh function the list is getting updated but the previous values are not going . to remove the previous values what should i do or there is any other method of refreshing

doRefresh(event) {
    console.log('Begin async operation');
    setTimeout(() => {
            this.ionViewWillEnter();
      console.log('Async operation has ended');
      event.target.complete();
    }, 2000);
  }


 ionViewWillEnter() {
    this.followers();
    this.getuserfollowing();

    setTimeout(() => {
      console.log('set timeout');
      if (this.hasfollowers == true && this.hasfollowing == true) {
        this.getstats();
      }
    }, 1000);
  }

``
this is my code ![Screenshot (21)|690x388](upload://f4BCzJDXxaNlcLc7lu4Aq09jFa4.png)

Posts: 3

Participants: 2

Read full topic

FCM Notification not showing when app killed on some devices

$
0
0

@hg8200 wrote:

I am working with ionic 3,

Some of devices not receiving FCM notifications when the app is killed on Android.
Mostly common devices are Oppo, Vivo and Xiaomi.

I’ve tested two plugin

and

Posts: 2

Participants: 2

Read full topic

Ionic ion-range events all Custom-Events?

$
0
0

@pschwindlingsr wrote:

Hey there,
I use ionic (@ionic/angular 4.11.10) in a bigger project and there is some strange Event-Thing going on on the “ion-range”.

I started a new blank projekt (ionic starter tabs) and there is the same thing going on. I am not sure if it is just normal now, or if it is some kind of a bug.

I like to use that ion-range in combination with an audio-player and the user should use it as a seekbar. So far so good.

No matter which event I use. I always get back a “CustomEvent”.

Template:
<ion-range (ionChange)="change($event)"></ion-range>

and ts-file:
change(value) {
console.log(value);
}

and log shows:

1. CustomEvent {isTrusted: false, detail: {…}, type: "ionChange", target: ion-range.md.hydrated.range-pressed, currentTarget: ion-range.md.hydrated.range-pressed, …}

  1. isTrusted: false
  2. detail: {value: 66}
  3. type: "ionChange"
  4. target: ion-range.md.hydrated
  5. currentTarget: null
  6. eventPhase: 0
  7. bubbles: true
  8. cancelable: true
  9. defaultPrevented: false
  10. composed: true
  11. timeStamp: 9909.179999958724
  12. srcElement: ion-range.md.hydrated
  13. returnValue: true
  14. cancelBubble: false
  15. path: (21) [ion-range.md.hydrated, slot, main.inner-scroll.scroll-y, document-fragment, ion-content.md.hydrated, app-tab2.ion-page, slot, document-fragment, ion-router-outlet.hydrated, div.tabs-inner, ion-tabs, app-tabs.ion-page, slot, document-fragment, ion-router-outlet.hydrated, ion-app.md.ion-page.hydrated, app-root, body, html.plt-desktop.md.hydrated, document, Window]
  16. __proto__: CustomEvent

So can anybody tell me if that is normal? In older versions there have been much more options, like “_isFocus” and stuff.

The thing is when I ise the ionBlur or ionFocus event i do not get the value the user clicked on because details is just empty with no value.

The old event looks like this one here:

1. Range {_config: Config, _elementRef: ElementRef, _renderer: RendererAdapter, _componentName: "range", _mode: "md", …}

  1. min: (...)
  2. max: (...)
  3. step: (...)
  4. snaps: (...)
  5. pin: (...)
  6. debounce: (...)
  7. dualKnobs: (...)
  8. ratio: (...)
  9. ratioUpper: (...)
  10. disabled: (...)
  11. value: (...)
  12. color: (...)
  13. mode: (...)
  14. _config: Config {_c: {…}, _s: {…}, _modes: {…}, _trns: {…}, plt: Platform}
  15. _elementRef: ElementRef {nativeElement: ion-range.range.range-md.range-md-white.ng-valid.ng-dirty.ng-touched}
  16. _renderer: RendererAdapter {delegate: DebugRenderer2}
  17. _componentName: "range"
  18. _mode: "md"
  19. _defaultValue: 0
  20. _form: Form {_focused: null, _ids: 35, _inputs: Array(1)}
  21. _item: Item {_config: Config, _elementRef: ElementRef, _renderer: RendererAdapter, _componentName: "item", _mode: "md", …}
  22. _ngControl: null
  23. _isFocus: false
  24. _disabled: false
  25. _debouncer: TimeoutDebouncer {wait: 0, timer: null, callback: ƒ}
  26. _init: true
  27. _initModel: true
  28. ionFocus: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
  29. ionChange: EventEmitter {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}
  30. ionBlur: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
  31. _value: 26
  32. id: "range-15-0"
  33. _labelId: "lbl-15"
  34. _haptic: Haptic {_p: undefined}
  35. _plt: Platform {_versions: {…}, _qp: QueryParams, _bbActions: Array(1), _pW: 0, _pH: 0, …}
  36. _dom: DomController {plt: Platform, r: Array(0), w: Array(0), q: false}
  37. _cd: ViewRef_ {_view: {…}, _viewContainerRef: null, _appRef: null}
  38. _min: 0
  39. _max: 93
  40. _step: 1
  41. _valA: 26
  42. _valB: 0
  43. _ratioA: 0.27956989247311825
  44. _ratioB: 0
  45. _events: UIEventManager {plt: Platform, evts: Array(1)}
  46. _slider: ElementRef {nativeElement: div.range-slider}
  47. _color: "white"
  48. _barL: ""
  49. _barR: "72.04301075268818%"
  50. _onChanged: ƒ (newValue)
  51. _onTouched: ƒ ()
  52. _rect: DOMRect {x: 95.234375, y: 391.234375, width: 243, height: 42, top: 391.234375, …}
  53. _activeB: undefined
  54. _pressed: false
  55. _pressedA: false
  56. _pressedB: false
  57. __proto__: BaseInput

Is that a bug or now just normal? Thanks for the help so far. :slight_smile:

Posts: 1

Participants: 1

Read full topic

Ionic serve failing to run

$
0
0

@Mabotso wrote:

Hie guys,

I’m a newbie to ionic. I’ve just bought a ionic template which is version 3.3.0-beta7 and my ionic version which is installed is version 3.3.0.
What happens is if i run ionic serve or ionic info i get the following prompt below:

Looks like this is an angular project, would you like to install @ionic/cli-plugin-angular and continue? (Y/n)
The challenge is when i say “Yes” it either hangs or throws the error message below.

Please help

Posts: 1

Participants: 1

Read full topic

Ionic 4 ios build constuctor not calling in app and splash screen not hidding

$
0
0

@Naitik-01 wrote:

hi developers,

my issue on mac ios build in my app not contructor call and not even installize the app
in android it work properly .

In ios build when installed the build from xcode it open and showing splash screen laoding and loading not moving inside the application.

please help me out developer
thanku in advance ,

Posts: 1

Participants: 1

Read full topic


How to set auto height for ifram in ionic

$
0
0

@sagar1412 wrote:

‘<iframe width=“100%” height=“100%” [src]=“url” frameborder=“0” allowfullscreen data-tap-disabled=“false” >’

Posts: 1

Participants: 1

Read full topic

Ionic 3: Deeplinking

$
0
0

@PappJulioNicolas wrote:

Hello everyone, any Deeplinks implement with Ionic 3 on iOS? I’m trying to make it work and I can’t.

Use the plugins:
cordova plugin add ionic-plugin-deeplinks and cordova plugin add cordova-plugin-customurlscheme but none worked successfully.

If you can help me with this issue, it would be great. If you have any tutorials, you will be grateful.

Regards and thank you very much
Nicolas

Posts: 1

Participants: 1

Read full topic

Ionic 4 pass data back from modal which is opened inside another modal to base page

$
0
0

@Pratikjaiswa15 wrote:

I have a page called home.component.ts. On this page, a modal called address-modal(first modal) is opened to let users select an address and the selected address is passed back to the home page. Meanwhile, On address-modal(first modal), If the user wants to add another address there is another modal called add-address-modal(second modal) is opened on button click.

Now when a user adds another address (the second modal is opened on the first modal) I want to dismiss both modals send a newly added address to home.apge without really sending it to address-modal.

Currently

  1. I am getting data back from address-modal(first modal) to home page
  2. I am getting data from add-address-modal(second modal) to address-modal(first modal)

But I want to get data directly from 2nd modal to base page

I am sending data back using a modal dismiss event. And 2nd modal’s dismiss event function is written on address-modal(first modal) page. Now, How can I access this data at the base page which is home.page.ts

Note: All these modals are lazy loaded Which means modal1’s module is added in the imports of base page’s module and modal2’s module is added in the imports of modal1’s module

here is my code
home.page.ts

import { ModalController } from '@ionic/angular';
import { AddressPage } from '../pages/address/address.page';

 constructor(public modalController: ModalController) {}


  async address_modal(){
    // console.log("clicked")
     const modal = await this.modalController.create({
       component: AddressPage,

     });

     modal.onDidDismiss()
     .then((data) => {
       const user = data['data']; // Here's your selected user!
       console.log("from address "  + user)

   });

     return await modal.present();
   }
}

home.page.html

  <ion-button (click) = "address_modal()">address</ion-button> // to open first modal

address.page.ts // first modal

 x:any;

  constructor(private modalController: ModalController) { 
   this.x =2;
  }

close(){
    this.modalController.dismiss(this.x)
  }


    async add_address(){


      // console.log("clicked")
       const modal = await this.modalController.create({
         component: AddAddressPage,

       });
       modal.onDidDismiss()
       .then((data) => {
         const user = data['data']; // Here's your selected user!
         console.log( "from add-adreess"  + user)

     });

       return await modal.present();
     }

address.html

<ion-button (click)="close()">close</ion-button> // close modal
<ion-button (click)="add_address()">open</ion-button> // open second modal

add-address.page.ts // second modal

import { ModalController } from '@ionic/angular';

 x:any;
  constructor(private modalController: ModalController) {
    this.x =5;
   }


  close(){
    this.modalController.dismiss(this.x)
  }

add-address.html

  <ion-button (click) ="close()">close</ion-button >

Posts: 1

Participants: 1

Read full topic

How to enable again the back button after disabling it?

$
0
0

@ioclaudio wrote:

Hi,
I’m disabling the back button of the Android mobile phone with this code:

  @HostListener('document:ionBackButton', ['$event'])
  private async overrideHardwareBackAction($event: any) {
    console.log('@@@@ overrideHardwareBackAction @@@@', $event);
    $event.detail.register(100, async () => {
      $event.stopImmediatePropagation();
      $event.stopPropagation();
      $event.preventDefault();
    });
    await void(0); // Do nothing
  }

It works. But I need to enable it in other pages of the app.
How can I unregister this event?

Thank you very much

cld

Posts: 1

Participants: 1

Read full topic

There will no longer be auto-switching for platform specificity when using Ionicons

$
0
0

@caipirginka wrote:

From: https://github.com/ionic-team/ionicons/blob/0d757ad96aa42847da80853ac1c0c3d43ac6a641/CHANGELOG.md

  • There will no longer be auto-switching for platform specificity when using Ionicons in an Ionic Framework app. If you’d like to switch icon styles based on the platform in Ionic use the md and ios attributes and provide the platform specific icon/variant name.

<ion-icon ios="heart-outline" md="heart-sharp"></ion-icon>

Maybe I’m missing something here, but I can’t understand the reasoning behind this change…
Up until now, Ionic chose the right icon to use, depending on the current platform, while with the new Ionicons, it would be the developer to know what the right icon is?

Isn’t this a drawback…?

Posts: 1

Participants: 1

Read full topic

Viewing all 49290 articles
Browse latest View live