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

How to get the date and time of the device (i.e. the device on which the app is running)


Integrate a new Paypal Javascript SDK in ionic

$
0
0

@alfanet wrote:

Hello

Has anyon already use the new Paypal Javascript SDK and can help me with an example code?
I need add a simple Button PayPal that send to PayPal Page.

I tried to insert the code that I found in the topic PayPal Donate With Ionic but it does’t work and I don’t understand witch is the problem.

I read a note, in the PayPal site, that from feb 2019 the old script, “”, is deprecate, and it should be used the new PayPal sdk is it true?

TIA
Giovanni

Posts: 2

Participants: 2

Read full topic

--prod --release causes application to not correctly display information

$
0
0

@joseph7 wrote:

Hey folks,

So I have my application almost ready for App store release, I decided to release a beta program for it but when I started to build it with --prod and --release flags things started to get weird. Firstly there was a white screen after splash and nothing more, turned out it was wrong typescript version, problem solved. But right now, I have another problem, let me present you with an example.
item-detail.html

<button ion-button large block outline icon-end clear="true" color="dark" (click)="unfold($event)" id="Second" *ngIf="hasProperty('unfold_title2')">
      <span class="button-text" [ngStyle]="{'font-size': font_size}" innerHTML="{{item.unfold_title2}}"></span>
      <ion-icon [name]="isUnfolded.Second? 'arrow-dropup-circle':'arrow-dropdown-circle'"></ion-icon>
    </button>

focus on the button please, because it is not being correctly displayed. And yes, the item has the property of ‘unfold_title2’, triple checked.

my ionic info output:

Ionic:

   ionic (Ionic CLI)  : 4.10.3 (C:\Users\user\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.4
   @ionic/app-scripts : 3.2.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, browser 5.0.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 13 other plugins)

System:

   Android SDK Tools : 26.1.1 (C:\Users\user\AppData\Local\Android\Sdk)
   NodeJS            : v10.14.1 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

I tried with both --prod and --release separately, and it is not working. I found similair issue on the forums (Building With --release --prod Styling Issues) and last comment there suggested to update ionic-angular, which I did, but it didn’t help.

Posts: 1

Participants: 1

Read full topic

[Ionic 4 using Vue] Ionic/Vue Tab icons not working without a CDN

$
0
0

@Imaginativeone wrote:

I’m learning to use Ionic/Vue, and I’m at the part of my journey that has me making a demo app that uses tabs.

My problem is similar to this. My tabs show up on a tab bar at the bottom of my screen, but the icons do not display.

Regrettably, I don’t know where “the font files” are, so that I can move them to the “www” folder.

I very, very, vehemently do not want to use a CDN to utilize my Ionicons, and they stubbornly won’t load without using a CDN; that is, they don’t automatically load from a node_modules location.

Thanks for your help.

Posts: 1

Participants: 1

Read full topic

Ionic select selected not working

$
0
0

@gaiapuffo wrote:

Hi,

I have a ionic select that i fill with for cycle

<ion-select value="" ok-text="Ok" cancel-text="Annulla" formControlName="skill_level_id"
                       style="white-space: pre-line !important" value="7">
      <ion-select-option *ngFor="let skill_level of skill_levels" value="skill_level['id']">{{ skill_level['tcode'] }}</ion-select-option>
  </ion-select>

After I fill the select in my ts fill i make

this.skillForm.controls[“skill_level_id”].setValue(skill_level_id);

The problem is that if I open the select the value is selected but is not showing in the UI if I not open the select…
The are too many bugs…

Posts: 1

Participants: 1

Read full topic

Change humans hairstyle or face color

$
0
0

@yogesh1988 wrote:

Hi all,
I want to create one app in which i want to apply different hairstyles or skin tones to human face image,
if any one make the same things or if any one have idea about how to do that using ionic 3 then please help me.
Thanks In Advance.

Posts: 1

Participants: 1

Read full topic

Ionic mobile issue

$
0
0

@sureshvgp wrote:

Hi,

We created the application using ionic 3.0. We are not building through Cordova but just running the app by ionic serve, like a web application.

Able to access the application in the browser but having an issue when access through a mobile browser.

Request and Response details:

URL: http://demo.test.com:8081/accounts/api/authentication/token
Request Method: POST
Request Header as : X-Api-Key=b4dbbd20-d3ab-11e8-a63f-4b1153c47651
Response (Laptop): Able to get the response
Response (Mobile): Getting error: Response with Status:0 for URL:null

Sample code:

In service class:

public anonymouslogin(apiKey):Observable {

let body = {
};
if (apiKey === null) {
  return Observable.throw("Please insert account.");
} else {
    let url = AuthServiceProvider.LOGIN_URL_APIEY;
    let headers = new Headers(
        {
            "X-Api-Key": localStorage.getItem("apikey")
        });
    
    let options = new RequestOptions({ headers: headers });
	alert("Initiated Post Request (in mobile not seeing any alert after this");
    return this.http.post(url, body, options)
        .map(response => {
			alert('success');//This alert not coming desktop but not in mobile.
            var temp = response.json();
            return true;
        },
        (error) => 
        {
			alert('Failure');//This alert not coming in mobile even if get error.
            return false;
        }
    );

}
}

In component:

this.auth.anonymouslogin(localStorage.getItem(“apikey”))
.subscribe(allowed => {
alert(‘Login success’);
},
(error) =>
{
alert(“This is error displaying in the mobile only”+error);
//Error objct as like this. ‘Response with Status:0 for URL:null’

        }
);

Not sure about the reason why this breaking in mobile.Same issue in both Android and IOS device.

Posts: 1

Participants: 1

Read full topic

Login/logout

$
0
0

@ImadEL wrote:

hi everybody, im new to this forum but not very very new to ionic, i worked with angular and its very similar,
my question is that,
when im logged in and the url is like this => http://localhost/ => then it has to redirect to home ONLY if im logged in.
if im not logged in and the url is like this => http://localhost/ => then you have go back to the login page, and the side-menu only has to appear when im logged in.

i can’t continue becaus im stuck with this and i dont know what to do, with this project im not using database with this one first i wanna do it without database.

loginpage.ts
Login(){
if (this.username == “admin” && this.password == “admin”) {
this.navCtrl.navigateRoot("/home")
}else{
this.ErrorMessage();
}
}

loginpage.html
<ion-content padding>

<ion-item>

<ion-label>Username:</ion-label>

<ion-input [(ngModel)]=“username”></ion-input>

<ion-icon name=“person” item-right></ion-icon>

</ion-item>

<ion-item>

<ion-label>Password:</ion-label>

<ion-input [(ngModel)]=“password” [type]=“passwordType”></ion-input>

<ion-icon [name]=“passwordIcon” (click)=“ShowHidden()” item-right></ion-icon>

</ion-item>

<div>

<ion-button expand=“block” (click)=“Login()”>Login</ion-button>

</div>

thanks in advance

Posts: 1

Participants: 1

Read full topic


ngModel question

$
0
0

@Doomkin wrote:

Hi, I have a quite simple app where ppl can add Tasks.

add-task.page.html is the following

<ion-content padding>
  <ion-list>
      <ion-item>
        <ion-label position="stacked">Task Title</ion-label>
        <ion-input type="text" ([ngModel])="task_title"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label position="stacked">Task Description</ion-label>
        <ion-input type="text" ([ngModel])="task_description"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label position="stacked">Task last date</ion-label>
        <ion-datetime min="2019" display-format="DD/MM/YYYY" ([ngModel])="task_last_date"></ion-datetime>
      </ion-item>
  </ion-list>
  <ion-button expand="block" shape="round" color="danger" (click)="addTask()">Add Task</ion-button>
</ion-content>

add-task.page.ts is the follwing

import { Component, OnInit } from '@angular/core';
import * as firebase from 'firebase';
import { ToastController, NavController } from '@ionic/angular';

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

  task_title: string;
  task_description: string;
  task_last_date: Date;
  task_owner: string;

  constructor(private toastCtrl: ToastController, private navCtrl: NavController) {
    this.task_owner = firebase.auth().currentUser.uid;

   }

  ngOnInit() {
  }

  addTask() {
    console.log(this.task_title);
    console.log(this.task_description);
    console.log(this.task_last_date);
    console.log(this.task_owner);

  }
}

When I click the button to add the task, in the console log I see 3 undefineds and only this.task_owner variable is populated.

Am I missing something stupid?

Thanks!

Posts: 3

Participants: 2

Read full topic

Ionic cordova in app phone call to a number but without launching dialer

$
0
0

@ubaidgul wrote:

I want to dial a number(speaker phone) from a page in my App and I want to keep that page in front of the user. I don’t want to open the builtin App to dial that number. I tried cordova plugin Call number but it takes me to builtin call App.

Posts: 1

Participants: 1

Read full topic

Custom notification sound not working, right filepath!

$
0
0

@SaltyPotato wrote:

My Environment

  • Plugin version: 0.9.0-beta.2
  • Platform: Android
  • OS version: 8.0.x
  • Device manufacturer / model: Samsung Galaxy s8
  • Cordova version (cordova -v): 4.2.1
  • Cordova platform version (cordova platform ls): 7.1.4
  • Plugin config: none
  • Ionic Version: 3.9.2

Expected Behavior

Using:

this.localNotifications.schedule({
                    id: 1,
                    text: 'You have arrived',
                    sound: 'file://assets/sounds/alerts/arrival.mp3',
                    data: { secret: 'hellloo' },
                    vibrate: true
                });

I want to display a notification with a custom sound
Located in src/assets/sounds/alerts/...

Actual Behavior

I’ve tried every possible filepath (I think) however it still plays the default Samsung Galaxy s8 notification sound.

Context

Explained above.

Debug logs

Logcat output:

02-28 17:38:06.354  3779  3779 D EdgeLightingManager: showForNotification : isInteractive=true, isHeadUp=false, color=0, sbn = StatusBarNotification(pkg=io.ionic.starter user=UserHandle{0} id=1 tag=null key=0|io.ionic.starter|1|null|10203: Notification(channel=default-channel-id pri=0 contentView=null vibrate=null sound=null tick defaults=0x0 flags=0x11 color=0x00000000 number=0 vis=PUBLIC semFlags=0x0 semPriority=0 semMissedCount=0))
02-28 17:38:06.354  3779  3779 D EdgeLightingPolicyManager: putNotification tickerText:true,titleText:true,text:true,sub:falsecn= + null
02-28 17:38:06.354  3779  3779 D EdgeLightingPolicyManager.NotificationGroup: updateNotificationData put :0|io.ionic.starter|1|null|10203,size=7
02-28 17:38:06.354  3779  3779 D EdgeLightingPolicyManager.NotificationGroup: 0|io.ionic.starter|1|null|10203:NotificationData time=1551371886354,
02-28 17:38:06.354  3779  3779 D EdgeLightingPolicyManager.NotificationGroup: 0|android|40|null|1000:NotificationData time=1551371251595,
02-28 17:38:06.355  3779  3779 D EdgeLightingPolicyManager.NotificationGroup: 0|com.rolflex.mobCSRApp|6|null|10156:NotificationData time=1551291051811,
02-28 17:38:06.355  3779  3779 D EdgeLightingPolicyManager.NotificationGroup: 0|com.wssyncmldm|1|null|1000:NotificationData time=1551349895823,
02-28 17:38:06.355  3779  3779 D EdgeLightingPolicyManager.NotificationGroup: 0|com.google.android.apps.maps|g:atn_group:NotificationData time=1551371775363,
02-28 17:38:06.355  3779  3779 D EdgeLightingPolicyManager.NotificationGroup: 0|com.rolflex.mobCSRApp|-574543954|null|10156:NotificationData time=1551291051833,
02-28 17:38:06.355  3779  3779 D EdgeLightingPolicyManager.NotificationGroup: 0|com.android.vending|874755343|null|10043:NotificationData time=1551314492705,
02-28 17:38:06.355  3779  3779 D EdgeLightingPolicyManager.NotificationGroup: 0|com.android.settings|9|null|1000:NotificationData time=1550852356484,
02-28 17:38:06.355  3779  3779 D EdgeLightingManager: showForNotificationScreenOn : return false by isAcceptableApplication.
02-28 17:38:06.365  3779  3779 I AccessibilityManagerService: semOnLightNotification(null), bIsFlashOn : false
02-28 17:38:06.372  4196  4196 D StatusBar: addNotification key=0|io.ionic.starter|1|null|10203 fullscreen:false
02-28 17:38:06.460  3426 15233 V NuPlayer: onSourceNotify() kWhatFlagsChanged  FLAG_CAN_PAUSE: 1  FLAG_CAN_SEEK_BACKWARD: 1 
02-28 17:38:06.461  3426 15233 V NuPlayer: NuPlayer::onSourceNotify Source::kWhatPrepared source: 0xe7d6dc40

I’ve noticed that ‘sound = null’ is being logged, which is kind of weird.
Thanks in advance.

With kind regards,

Jonah

Posts: 1

Participants: 1

Read full topic

Lazy loading from common folder

$
0
0

@stephaneHillerCGI wrote:

I have a repo with three folder : 2 ionic apps and a common module. The goal of this common module is to provide common information for the two ionic projects (the module contains providers, component, models, pages, …).

But when you try to lazy load a page from the module, it doesn’t work (“core.js:1350 ERROR Error: Uncaught (in promise): invalid link: MyPage”).

Is it possible that Ionic doesn’t “see” the IonicPage() annotation because this annotation isn’t in the src folder ? If true, is it possible to extends the watcher to another folder so Ionic can recognize the annotation ?

   ionic (Ionic CLI)  : 4.11.0 (C:\Users\stephane.hiller\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.0

System:

   NodeJS : v8.9.4 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 7

ps: my current ionic version is 4.11, but it’s an Ionic v3 application.
ps 2 : I’ve open an issue on ionic github : https://github.com/ionic-team/ionic-v3/issues/983

Posts: 1

Participants: 1

Read full topic

Series of Ionic apps

$
0
0

@fpagano wrote:

I would like to publish a series of Ionic apps that share the same code and differ only for some resources (eg the icon and the background image) and the title. Each of these apps must contain an identifier to download the appropriate data from the Cloud. Is there a way to automate this process or do I have to manually modify the config.xml file, create certificates, deploy, etc.? Apps must be published on both Google Play and iTunes.

Posts: 2

Participants: 2

Read full topic

Can't change ion-input style from global.scss

$
0
0

@joe_scotto wrote:

Ionic v4 has been a nightmare for me being able to override styles. I find it quite confusing and overly complex to simply change the style of an input but that’s beside the point… The issue I’m currently having is that my css works fine when on the component .scss file but I wish to globally override all ion-input but it will only work from global.scss when I use !important

ion-input {
    background: rgba(var(--ion-color-light-rgb), 1);
    color: var(--ion-color-light-contrast);
    margin-bottom: 16px;
    height: 50px;
    border-radius: var(--radius);
    padding-left: 16px;
}

ion-input,
ion-button {
    max-width: var(--content-max-width) !important;
    margin: 0 auto 16px auto !important;
}

This code works perfectly fine on the individual page .scss files but once I put it in global.scss it no longer will work unless I use !important

Posts: 5

Participants: 3

Read full topic

Using native Camera plugin

$
0
0

@lstables wrote:

Hi all,

I’m using the native camera plugin on v3 of Ionic, all is working fine, but I wish to know if there’s a way to get the photo’s metadata, like the timestamp and location (if location service turned on) of when the photo was taken. If so how?

Posts: 1

Participants: 1

Read full topic


Ionic 4 - bug trying to skip login page if user is logged in

$
0
0

@dev-gilbert wrote:

I am basically trying to implement a logic that when the user is logged in, they should be taken immediately to the home page and skip the login page. Right now my code works, but there’s a delay, because the value of my BehaviorSubject is initialized as false and when I subscribe to it in my app.component.ts the initialization value of my BehaviorSubject is always false, then it changes to the last emitted value, which I change to true when the user logs in.

My problem is that due to the small delay, the login page first appears on the screen then it quickly changes to the home page.

Look at this screenshot:

TL;DR What can I do so when I subscribe to my BehaviorSubject I always get the last emitted value, ignoring its initial value?

Below some code for more info:

service.ts:

authenticationState = new BehaviorSubject(false);

constructor (...) {
    //Check if token is stored when the device is ready
    this.plt.ready().then(readySource => {
      this.checkToken();
    });
  }

  checkToken() {
    return this.storage.get(TOKEN_KEY).then(res => {
      if (res) {
        this.authenticationState.next(true);
      }
    });
  }

login() {
    return this.storage.set(TOKEN_KEY, "user123").then(() => {
      this.authenticationState.next(true);
    });
  }

app.component.ts:

constructor(...) { this.initializeApp() }

initializeApp() {
 console.log(
        "auth state current value is: " +
          this.authService.authenticationState.getValue()
      );
      this.authService.authenticationState.subscribe(state => {
        console.log("Auth state: " + state);
        if (state) {
          this.router.navigate(["home"]);
        } else {
          this.router.navigate(["login"]);
        }
      });
}

Posts: 1

Participants: 1

Read full topic

Ionic 4 - ion-input underline

$
0
0

@blondie63 wrote:

On my project Ionic 4 Angular 7 i’ve a setting page with this code:

<ion-content padding class="tab4-content">
  <ion-list>
    <ion-item>
      <ion-label>{{ 'VERSION' | translate }}:</ion-label>
      <ion-label class="aligned-right">{{ version }}</ion-label>
    </ion-item>
  </ion-list>
  <ion-list>
    <ion-item>
      <ion-label>{{ 'GPS' | translate }}</ion-label>
      <ion-toggle [disabled]="GPSshouldDisable" checked="false"></ion-toggle>
    </ion-item>
    <ion-item>
      <ion-label>{{ 'GPSE' | translate }}</ion-label>
      <ion-toggle [disabled]="GPSEshouldDisable" checked="false"></ion-toggle>
    </ion-item>  
  </ion-list>
</ion-content>

this the result:

How can i change settings described on screenshot ?
Thanks

Posts: 2

Participants: 2

Read full topic

QR scanner not woking at all

Getting error in build time Ionic react : WebpackError: ReferenceError: window is not defined

Are there any Android simulators for ionic serve?

$
0
0

@fostack wrote:

Not looking to emulate a device. It is moreso for esthetics. I’m making ionic development videos and I would like the view to be rendered within an Android frame as I’m updating code.

Thank you.

Posts: 1

Participants: 1

Read full topic

Viewing all 48983 articles
Browse latest View live


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