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

How to select radio link from api

$
0
0

@Mdweyal wrote:

this is my radio player provider ts code:

export class RadioPlayerProvider {
settings: any;
url: string;
stream: any;
promise: any;
data: any;
radio_url: any;

constructor(
private router: Router,
private apiService: ApiService,

) {
  this.getData();
this.url = "http://198.105.216.204:8064/";
this.stream = new Audio(this.url);

}
getData(){
this.apiService
.getappsettings(
settings?
)
.subscribe(settings => {
console.log(settings);
this.settings = settings;
});
}
play() {
this.stream.play();
this.promise = new Promise((resolve, reject) => {
this.stream.addEventListener(‘playing’, () => {
resolve(true);
});

  this.stream.addEventListener('error', () => {
    reject(false);
  });
});

return this.promise;

};

pause() {
this.stream.pause();
};

getStatus() {
return this.stream.playing==true ? ‘connected’ : ‘disconect’;
}

}
this is my api code where I have app_radio link:
this.apiService
.getappsettings(
settings?
)
.subscribe(settings => {
console.log(settings);
this.settings = settings;
});

I want to change this static url to dynamic to get it from api:
this.url = “http://198.105.216.204:8064/;stream1”;

Posts: 2

Participants: 2

Read full topic


Ionic 4 - Error while accessing JSON object

$
0
0

@ozyildirim wrote:

Hello.
I’m using uploadcare to store images. In my application, I upload an image and it returns JSON object, but after that, I can’t use event object. I want to show image in the same page, but event object doesn’t give me “file” value. How can I solve it? I am also beginner :slight_smile: Thanks.

import { Component, OnInit } from '@angular/core';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import { AlertController } from '@ionic/angular';
import {Router}from '@angular/router';

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

  constructor(public http:HttpClient,public router:Router,public alert:AlertController) { }
  imageURL:string

  ngOnInit() {
  }

  fileChanged(event){
    const  files = event.target.files;
    
    // console.log(files)
    var cdn = 'https://upload.uploadcare.com/base/'


    const data = new FormData()
    data.append('file',files[0])
    data.append('UPLOADCARE_STORE','1')
    data.append('UPLOADCARE_PUB_KEY','44461d3206752c093277')
    

    this.http.post(cdn,data).subscribe(event=>{
      // this.alertShow("Succesful","Your photo uploaded.")
      **this.imageURL= event.json().file //PROBLEM IS HERE**
      console.log(event)
    })

  }

}

Posts: 3

Participants: 2

Read full topic

Display all week endings of current month

$
0
0

@Vinod2k19 wrote:

I need to display all the week ending dates of current month. Can anyone help me on how to do that?

Posts: 3

Participants: 2

Read full topic

Ionic Http request getting error with XML object

$
0
0

@fquouhadiho wrote:

I’ve a problem when I try to send an XML object to Geoserver.
When I try with Postman it sends successfully, even in Geoserver Demo.
But with my emulator I get these errors.

I’ve tried HTTPClient, XMLHttpRequest and HTTP from '@ionic-native/http/ngx'; but I don’t get a good feedback.

With XMLHttpRequest and HttpClient I get this error:

Access to XMLHttpRequest at ‘http://ip_address:port/geoserver/worksapce/wfs’ from origin ‘http://localhost’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

And with HTTP from '@ionic-native/http/ngx'; I get this one

Error: advanced-http: “data” option is configured to support only following data types: Object
at Object.processData (helpers.js:400)
at Object.sendRequest (public-interface.js:158)
at Object.post (public-interface.js:174)
at callCordovaPlugin (vendor-es2015.js:98821)
at vendor-es2015.js:98636
at vendor-es2015.js:98594
at new ZoneAwarePromise (polyfills-es2015.js:3882)
at tryNativePromise (vendor-es2015.js:98593)
at getPromise (vendor-es2015.js:98614)
at wrapPromise (vendor-es2015.js:98619)

Here is my code

var xmlData= '<wfs:Transaction service="WFS" version="1.0.0" '+
'xmlns:topp="http://www.openplans.org/topp" '+
'xmlns:ogc="http://www.opengis.net/ogc" '+
'xmlns:wfs="http://www.opengis.net/wfs">'+
'<wfs:Update typeName="topp:tasmania_roads">'+
'<wfs:Property>'+
'<wfs:Name>TYPE</wfs:Name>'+
'<wfs:Value>street</wfs:Value>'+
'</wfs:Property>'+
'<ogc:Filter>'+
'<ogc:FeatureId fid="tasmania_roads.1"/>'+
'</ogc:Filter>'+
'</wfs:Update>'+
'</wfs:Transaction>';

//Request using HttpCLient

let doc = parser.parseFromString(xmlData, "application/xml");
       
let headers = new HttpHeaders()
.set("Authorization", btoa("admin:geoserver"))
.set('Access-Control-Allow-Origin', '*')
.set('Content-Type', 'application/xml');
this.httpClient.post(this.ENDPOINT + 'geoserver/workspace/wfs', doc, {headers: headers, 
 withCredentials : true, observe : 'body'})
  .subscribe((rs) => {
  console.error(rs);
})

//Request using HTTP

this.httpNative.post(this.ENDPOINT + 'geoserver/firca_demo/wfs',xmlData , {
      Authorization: btoa("admin:geoserver"), 'Content-Type': 'application/xml',
}
).then((rs) => {
  console.log(rs);
}).catch((err) => {
console.error(err);
})

Need help to solve it.

Posts: 1

Participants: 1

Read full topic

Ionic 4 Clear Cache (Ionic Cache)

$
0
0

@vinayagamoorthyg wrote:

I want to remove Ionic Cache (Ionic Version 4) . Home Page Url contain Form when it was submitted after went to dashboard .Finally logout Form values not cleared. I have Multiple Form in that Page how can clear form values not using Form Reset It shows Form Invalid At that time .(Mostly Prefered Ionic Hooks ).
Also Navigation Multiple Page Clear Cache.
Router.Navigate with clear Ionic cache.
using router.naviage[’/Url’] Specify Some Extra Params to Reset and Load New Url

Posts: 1

Participants: 1

Read full topic

Ionic Studio / Appflow Cancelable or Demo?

$
0
0

@ignatz wrote:

Hello Ionic,
I already tried to reach you via Ticket and Support, but i get no response for days now, so i try in here.

My company wants to evaluate if we can use IOnic Studio for our Project, but this depends on:

  • Is Ionic Studio able to use Custom components
  • Is Ionic Studio able to use Angular Only Components
  • Is our designer Able to work fluidly with Ionic Studio

This of course needs the software to be tested, especially becouse we have a given codebase which must work with Ionic Studio for it to be usefull. Sadly we coudn’t find any demo version of Ionic Studio.

Also we didnt find any information about the Ionic Appflow Abonemont beeing cancelable after a few months. It would be a huge wast of money, if we buy IOnic Studio to evaluate it, figure out it cant be used for our Projects, just to pay for x months becouse nobody said we coudnt cancel it.

So can we Please get the Information if Ionic Apflow can be canceld at any month, or if there is a demo version?

Posts: 1

Participants: 1

Read full topic

Como alterar uma imagem dinamicamente?

Ionic 5, gestures , drawer menu

$
0
0

@Mmadzharov wrote:

Hi,
I’ve seen that there is a way to make it ourselves a drawable menu with Ionic 5 Gestures like in this video.
But for me it makes sense to have it ‘out of the box’ since it’s pretty common component. Is there a way to make the modal to work like the one shown in the video.

Posts: 1

Participants: 1

Read full topic


Unable to fetch records from Mysql using ionic

$
0
0

@sahibsingh wrote:

Hello Everyone

I am using CRUD with PHP and Mysql example. My app insert the record successfully, but unable to to read the records. When i register new user it successfully insert user in login table. But when i try to login it does not read records from Mysql. My code is this.

post-provider.ts
import { Injectable } from ‘@angular/core’;

import { Http, Headers, RequestOptions } from ‘@angular/http’;

import ‘rxjs/add/operator/map’;

@Injectable()

export class PostProvider {

server: string = 'https://localhost/ionic4login/server_api/';

constructor(public http: Http) {

}

    postData(body, file){

    let type = 'application/json; charset=utf-8';

    let headers = new Headers({ 'Content-Type': type });

    let options = new RequestOptions({ headers: headers });

    return this.http.post(this.server + file, JSON.stringify(body), options)

    .map(res => res.json());

}

}

login.page.ts
import { Component, OnInit } from ‘@angular/core’;

import { Router } from ‘@angular/router’;

import { ToastController } from ‘@ionic/angular’;

import { PostProvider } from ‘…/…/providers/post-provider’;

import { Storage } from ‘@ionic/storage’;

@Component({

selector: ‘app-login’,

templateUrl: ‘./login.page.html’,

styleUrls: [’./login.page.scss’],

})

export class LoginPage implements OnInit {

username: string = ‘’;

password: string = ‘’;

constructor(

private router: Router,

public toastController: ToastController,

private postPvdr: PostProvider,

private storage: Storage,

) { }

ngOnInit() {

}

formRegister() {

this.router.navigate(['/register']);

}

async proseslogin() {

if (this.username != '' && this.password != '') {

  let body = {

    username: this.username,

    password: this.password,

    aksi: 'login'

  };

  this.postPvdr.postData(body, 'file_aksi.php').subscribe(async data => {

   var alertpesan = data.msg;

   if (data.success) {

     this.storage.set('session_storage', data.result);

     this.router.navigate(['/customer']);

     const toast = await this.toastController.create({

      message: 'Welcome!',

      duration: 2000

     });

     toast.present();

   } else {

     const toast = await this.toastController.create({

       message: alertpesan,

       duration: 2000

     });

     toast.present();

   }

 });

} else {

  const toast = await this.toastController.create({

    message: 'Username or password invalid',

    duration: 2000

  });

  toast.present();

}

this.username = '';

this.password = '';

}

}

login.page.html

<ion-title>login</ion-title>
<ion-item>

  <ion-label position="floating">Username</ion-label>

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

</ion-item>



<ion-item>

  <ion-label position="floating">Password</ion-label>

  <ion-input type="password" [(ngModel)]="password"></ion-input>

</ion-item>
<ion-button expand="block" shape="round" (click)="proseslogin()" >Sign In</ion-button>

<ion-button expand="block" shape="round" (click)="formRegister()">Register</ion-button>

file_aksi.php

<?php header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Credentials: true'); header('Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE'); header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization'); header('Content-Type: application/json; charset=UTF-8'); define('DB_NAME', 'ionic4login'); define('DB_USER', 'root'); define('DB_PASSWORD', ''); define('DB_HOST', 'localhost'); $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME); $postjson = json_decode(file_get_contents('php://input'), true); $today = date('Y-m-d'); if($postjson['aksi'] == "add_register") { $password = md5($postjson['password']); $query = mysqli_query($mysqli, "INSERT INTO login SET full_name = '$postjson[full_name]', phone_number = '$postjson[phone_number]', username = '$postjson[username]', password = '$postjson[password]' "); // password = '$password' if($query) $result = json_encode(array('success' =>true)); else $result = json_encode(array('success' => false, 'msg'=>'error , please try again')); echo $result; } elseif($postjson['aksi'] == "login") { echo "hello"; $password = md5($postjson['password']); $query = mysqli_query($mysqli, "SELECT * FROM login WHERE username='$postjson[username]' AND password='$password' "); $check = mysqli_num_rows($query); if($check>0){ $data = mysqli_fetch_array($query); $datauser = array( 'user_id' => $data['user_id'], 'full_name' => $data['full_name'], 'phone_number' => $data['phone_number'], 'username' => $data['username'], 'password' => $data['password'] ); if($query) $result = json_encode(array('success' =>true, 'result'=>$datauser)); else $result = json_encode(array('success' => false, 'msg'=>'error, please try again')); }else{ $result = json_encode(array('success' => false, 'msg'=>'unregister account')); } echo $result; } if($postjson['aksi']=='add'){ $query = mysqli_query($mysqli, "INSERT INTO master_customer SET name_customer = '$postjson[name_customer]', desc_customer = '$postjson[desc_customer]', created_at = '$today' "); $idcust = mysqli_insert_id($mysqli); if($query) $result = json_encode(array('success'=>true, 'customerid'=>$idcust)); else $result = json_encode(array('success'=>false)); echo $result; } elseif($postjson['aksi']=='getdata'){ $data = array(); $query = mysqli_query($mysqli, "SELECT * FROM master_customer ORDER BY customer_id DESC LIMIT $postjson[start],$postjson[limit]"); while($row = mysqli_fetch_array($query)){ $data[] = array( 'customer_id' => $row['customer_id'], 'name_customer' => $row['name_customer'], 'desc_customer' => $row['desc_customer'], 'created_at' => $row['created_at'], ); } if($query) $result = json_encode(array('success'=>true, 'result'=>$data)); else $result = json_encode(array('success'=>false)); echo $result; } elseif($postjson['aksi']=='update'){ $query = mysqli_query($mysqli, "UPDATE master_customer SET name_customer='$postjson[name_customer]', desc_customer='$postjson[desc_customer]' WHERE customer_id='$postjson[customer_id]' "); if($query) $result = json_encode(array('success'=>true, 'result'=>'success')); else $result = json_encode(array('success'=>false, 'result'=>'error')); echo $result; } elseif($postjson['aksi']=='delete'){ $query = mysqli_query($mysqli, "DELETE FROM master_customer WHERE customer_id='$postjson[customer_id]' "); if($query) $result = json_encode(array('success'=>true, 'result'=>'success')); else $result = json_encode(array('success'=>false, 'result'=>'error')); echo $result; } ?>

Posts: 1

Participants: 1

Read full topic

Third party payment provider in app for API data

$
0
0

@Postmans wrote:

After reading several threads on Stackoverflow / Reddit it’s still quite confusing what is allowed on Android / iOS regarding payments.

I have a an app available for iOS and Android and a web app dashboard (plain PHP / MySQL, will become a Ionic Dashboard). The iOS / Android / Web app uses an API where your profile and game statistics are stored. To cover the costs of the server I want to add a premium membership feature. Users can subscribe on a monthly / yearly base. This allows the user to get more statistics available in the app (iOS, Android and Web app).

The idea is the same as Spotify (free account / paid account) with the difference that you get music without ads with Spotify and with this app you will get access to more statistics data / more filter options in the API.
But is it allowed ? Because you get extra data in the app (so you would think In App Purchases), however it can be consumed in the web app so Stripe / Mollie intergration would be allowed)

Posts: 1

Participants: 1

Read full topic

Ionic v4 - Fail to run Animation in IOS

$
0
0

@vinimartinps92 wrote:

I have one Ionic v4 project which have one page with animation. That animation is working on Browser and Android Real Devices but is failing in IOS Emulator using a MACBOOK.

This is the HTML :

<ion-grid fixed class="center" *ngIf="playing==true">
    <ion-row>
      <ion-col size="12">
        <ion-card *ngFor="let card1 of cards1" [class.stop] = "stop1==true" [@cardSpinner]="card1.state">
          <ion-card-content>
            <ion-card-title class="center" [class.stop] = "stop1==true" expand="block">
              {{card1.name}}
            </ion-card-title>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
     <ion-row>
      <ion-col size="12">
        <ion-card  *ngFor="let card2 of cards2" [class.stop] = "stop2==true" [@cardSpinner]="card2.state">
          <ion-card-content class="center">
            <ion-card-title class="center" [class.stop] = "stop2==true" expand="block" >
              {{card2.name}}
            </ion-card-title>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

TS :

import { Component, OnInit } from '@angular/core';
import { trigger, state, animate, transition,style } from '@angular/animations';
.....

@Component({
  selector: 'app-game-playing-slotmachine',
  templateUrl: './game-playing-slotmachine.page.html',
  styleUrls: ['./game-playing-slotmachine.page.scss'],
  animations: [
    trigger('cardSpinner', [
      state('in', style({ opacity: 1, transform: 'translateY(0)' })),
      state('out', style({ opacity: 1, display: 'none', transform: 'translateY(-100%)' })),
      
      transition('in => out', [
        style({ transform: 'translateY(0)', opacity: 1 }),
        animate('0.2s', style({ transform: 'translateY(-100%)', opacity: 0 }))
      ]),
      transition('out => in', [
        style({ transform: 'translateY(100%)', opacity: 0 }),
        animate('0.2s', style({ transform: 'translateY(0)', opacity: 1 }))
      ])
    ])
  ]
})

export class GamePlayingSlotmachinePage implements OnInit {

...

  constructor(
    ...
  ) { 

    ...

  }

  ngOnInit() {

    ...
    
  }

  getCards(){

    ...
    
    this.cards1 = this.cardsList.cardsSlot1;

    this.cards2 = this.cardsList.cardsSlot2;

    this.cards1.forEach(card => card.state = 'out');
    this.cards2.forEach(card => card.state = 'out');
  }

  play(){
    this.playing = true;

    this.animateSpin();
  }

  animateSpin(){

    ...

    this.spinAnimation = true;

    var timeout1 = 0;
    var timeout2 = 0;

    var count = 0;

    this.cards1.forEach(card => card.state = 'out');
    this.cards2.forEach(card => card.state = 'out');

    this.stop1 = false;
    this.stop2 = false;

    
    while( count < 15){

      var randomIndex1 = Math.round(Math.random() * (this.cards1.length - 1) - 0) + 0;
      var randomIndex2 = Math.round(Math.random() * (this.cards2.length - 1) - 0) + 0;

      count ++;

      this.stateChange1(randomIndex1, timeout1, count)
      this.stateChange2(randomIndex2, timeout2, count)

      timeout1 = timeout1 + 550;
      timeout2 = timeout2 + 850;

    }

  }

  stateChange1(randomIndex1, timeout1, count) {
    setTimeout( () => {

      this.cards1.forEach(card => card.state = 'out');
  
      this.cards1[randomIndex1].state = 'in';

      if (count == 15) {this.stateChangeColor(1, timeout1)}
    }, timeout1);
  }

  stateChange2(randomIndex2, timeout2, count) {
    setTimeout( () => {

      this.cards2.forEach(card => card.state = 'out');
  
      this.cards2[randomIndex2].state = 'in';

      if (count == 15) {this.stateChangeColor(2, timeout2)}

    }, timeout2);
  }

  stateChangeColor(fieldId, timeout) {
    setTimeout( () => {

      if (fieldId == 1) {this.stop1 = true;}
      else {
        this.stop2 = true;
        this.spinAnimation = false;
      }
    }, 2000);
  }

}

I read about relation issues and found it about use polyfill and that is how I made it :

First I run npm install --save web-animations-js.

and this is the polyfill.ts file (import animations part)

/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
 import 'web-animations-js/web-animations.min';  // Run `npm install --save web-animations-js`.

and the import in my main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import './polyfills' 

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

but still not working. I can see the methods being called, the data changing between IN and OUT, but the animation dont work.

I am using those versions:

    "@angular/animations": "^8.0.0",
    "web-animations-js": "^2.3.2",
    "cordova-ios": "^5.1.1",
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",

Am I doing something wrong ?

Thank you

Posts: 1

Participants: 1

Read full topic

Ionic 4 - Refresh HTML data on click

$
0
0

@cloude83 wrote:

I get rendered data after app loaded, but when I click on “refreshOp()” button, I can’t refresh my HTML data but I can see objects only in console mode, but not in HTML rendered.

Any hints ? Thanks.

result.service.ts

export class ResultsService {
  myService: any;

  constructor(private httpService: HttpClient) {

    this.checkAllLoggedOp();

  }

   public checkAllLoggedOp() {
    this.items = this.httpService.get('https://mysite').map(res => res);
    return this.items;
  }


result.page.html

    <ion-buttons slot="start" (click)="refreshOp()"> <-- click here update app.component.html
      <ion-menu-button autoHide="false"></ion-menu-button>
    </ion-buttons>


app.component.ts

export class AppComponent implements OnInit {

  ngOnInit() {
      this.refreshOp(); <-- works after app loaded
  }

  refreshOp() {
      this.myService.checkAllLoggedOp().subscribe((res: any) => {
          this.items = res;
      });
  }

}


app.component.html

      <ion-list *ngFor="let item of items">
        <ion-item>
          <div class="icon-status" slot="end">         
            <ion-icon name="{{item.status}}"></ion-icon>
          </div>
      </ion-item>

Posts: 1

Participants: 1

Read full topic

Vertical an horizontal alignment impossible

$
0
0

@obermoserkitz1 wrote:

Hello there!
It is impossible to align items in my grid horizontally and vertically. All the documentation and utilities don’t work…my code is below and i just want the text horizontally and vertically centered in each column. How do i accomplish that? it is simply not possible

full code is here: https://github.com/obermoserkitz/ionic-grid-problem

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons collapse="true" slot="end">
      <ion-button slot="icon-only">
        <ion-icon name="menu"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>
      Orders
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-buttons collapse="true" slot="end">
        <ion-button slot="icon-only">
          <ion-icon name="menu"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-title size="large">Orders</ion-title>
      <ion-searchbar></ion-searchbar>
    </ion-toolbar>
  </ion-header>

  <ion-grid>
    <ion-row justify-content-center>
      <ion-col size="12">A</ion-col></ion-row
    >
    <ion-row align-items-center>
      <ion-col
        size="6"
        sizeLg="6"
        sizeMd="6"
        sizeSm="6"
        *ngFor="let x of ['B','C','D','E','F','G']; let i=index"
        >{{x}}{{i}}</ion-col
      >
    </ion-row>
  </ion-grid>
</ion-content>

Posts: 1

Participants: 1

Read full topic

Ionic v4 - HTML 5 Video Configs fail in IOS

$
0
0

@vinimartinps92 wrote:

I have on page with only a

This is my html :

<ion-content>
    <video width="100%" height="100%" autoplay style="background-color:white; object-fit: cover;" poster="assets/imgs/white_background.png" (ended)="end()" (click)="end()">
        <source src="assets/video/chone_splash.mp4" type="video/mp4">
      </video>

</ion-content>

and my end() method in .ts file :

end(){
    this.navCtrl.navigateForward('/newpage')
  }

Am I doing something wrong ?

Thank you

Posts: 1

Participants: 1

Read full topic

Ionic React: How to Test IonSearchBar onChange Listener

$
0
0

@joseph-freeman wrote:

I am trying to right a Jest and Enzyme test to for an IonSearchBar implementation. I can’t seem to simulate the onChange event with Enzyme. Is it possible to test the IonSearchBar in this manner?

example,

const ShallowSearchPage = shallow(<SearchPage/>);

it ('', (should fire on onChange event) => {
    let searchBar = ShallowSearchPage.find('IonSearchbar');
    searchBar.simulate('change', { target: { value: 'joseph' } });
}) 

The above fails with the following error:

Method “simulate” is meant to be run on 1 node. 0 found instead.

I am using Jest and Enzyme for testing. Any help would be most appreciated.

UPDATE:

Turns out that you can’t use Enzyme to target the component element by the tag name, in this case “IonSearchbar”. Instead add an id to the IonSearchbar to your jsx template.

example.

<IonSearchbar id="search-bar">

Then with enzyme target the id instead of the tag.

example:

let searchBar = ShallowSearchPage.find('#search-bar');

UPDATE:

Know my issue is actually getting the change event to fire when attempting to simulate late it. The following does not work:

searchBar.simulate('change');
searchBar.simulate('onchange');
searchBar.simulate('onionchange');

Any help figuring this out would be most appreciated.

Posts: 1

Participants: 1

Read full topic


Please help with this crash - ads

$
0
0

@Yubasin wrote:

All my apps that are using ads are crashing and causing bad user experiences

This bug appeard with android 8

java lang illegalstateexception only fullscreen activities can request orientation adactivity

Posts: 1

Participants: 1

Read full topic

How to use ToastController in Ionic 4?

$
0
0

@Sweg wrote:

I am trying to use a Toast Controller in my Ionic 4 app.

When the code tries to compile however, I am getting this error message:

Property ‘present’ does not exist on type ‘Promise’. Did yo
u forget to use ‘await’?

Here is my code:

login(): void {
    firebase.auth().signInWithEmailAndPassword(this.email, this.password)
      .then((user) => {
        this.toastCtrl.create({
          message: 'Welcome ' + user.user.displayName,
          duration: 3000
        }).present();
      }).catch((err) => {
        console.log(err);
      })
  }

After seeing this error, I did some research & came up with the following:

async presentAlert() {
    const alert = await this.toastCtrl.create({
      message: 'User Exists',
      duration: 3000      
    });
    await alert.present();
  }


  login(): void {
    firebase.auth().signInWithEmailAndPassword(this.email, this.password)
      .then((user) => {
        console.log('in here');
        this.presentAlert;
      }).catch((err) => {
        console.log(err);
      })
  }

Now, “in here” is printed to the console, but the toast is still not appearing.

Can someone please tell me what I’m doing wrong, & how can it be resolved. Thanks a lot!

Posts: 1

Participants: 1

Read full topic

Plugin_not_installed error on Android for FingerprintAIO

$
0
0

@sjregan wrote:

I have been successfully using the cordova-plugin-fingerprint-aio plugin and the Ionic native wrapper for a while. Now when I run on an Android device I get a ‘plugin_not_installed’ error:

WARN: Native: tried calling FingerprintAIO.isAvailable, but the FingerprintAIO plugin is not installed.
WARN: Install the FingerprintAIO plugin: 'ionic cordova plugin add cordova-plugin-fingerprint-aio'

The plugin works fine on iOS so it is not an issue with platform ready, or including the provider in the app module.

I have tried uninstalling/reinstalling the plugin, the native wrapper and the android platform.

Relevant code:

import {FingerprintAIO} from '@ionic-native/fingerprint-aio/ngx'

constructor(
    protected fingerprintAIO: FingerprintAIO
)
this.fingerprintAIO.isAvailable().then(result => {

    // Something

}).catch(error => {

    console.log('Unable to check fingerprint feature availability', error, JSON.stringify(error))

})

Info:

Ionic:

   Ionic CLI                     : 5.4.14 (/Users/me/.nvm/versions/node/v13.1.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.803.22
   @angular-devkit/schematics    : 8.3.22
   @angular/cli                  : 8.3.22
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 7.1.4, browser 6.0.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 28 other plugins)

Utility:

   cordova-res (update available: 0.9.0) : 0.8.1
   native-run                            : 0.3.0

System:

   Android SDK Tools : 26.1.1 (/Users/me/Library/Android/sdk)
   ios-deploy        : 1.10.0
   ios-sim           : 8.0.2
   NodeJS            : v13.1.0 (/Users/me/.nvm/versions/node/v13.1.0/bin/node)
   npm               : 6.12.1
   OS                : macOS Catalina
   Xcode             : Xcode 11.3 Build version 11C29

Plugins:

com-sarriaroman-photoviewer 1.1.18 "PhotoViewer"
cordova-plugin-add-swift-support 2.0.2 "AddSwiftSupport"
cordova-plugin-advanced-http 2.3.1 "Advanced HTTP plugin"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-appavailability 0.4.2 "AppAvailability"
cordova-plugin-camera 4.1.0 "Camera"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-device-motion 2.0.1 "Device Motion"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-fingerprint-aio 3.0.1 "FingerprintAllInOne"
cordova-plugin-inappbrowser 3.2.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.3 "cordova-plugin-ionic-webview"
cordova-plugin-ios-camera-permissions 1.2.0 "iOS Permissions"
cordova-plugin-media 5.0.3 "Media"
cordova-plugin-nativestorage 2.3.2 "NativeStorage"
cordova-plugin-photo-library 2.2.1 "Photo Library"
cordova-plugin-safariviewcontroller 1.6.0 "SafariViewController"
cordova-plugin-secure-storage 3.0.1 "SecureStorage"
cordova-plugin-shake 0.7.0 "Shake Gesture Detection"
cordova-plugin-splashscreen 5.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.3 "StatusBar"
cordova-plugin-telerik-imagepicker 2.2.4 "ImagePicker"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova-plugin-youtube-video-player 2.3.0 "CordovaYoutubeVideoPlayer"
cordova-sqlite-storage 3.1.0 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"
cordova-support-google-services 1.3.2 "cordova-support-google-services"
info.protonet.imageresizer 0.1.1 "Image Resizer"
nl.x-services.plugins.backgroundaudio 1.0.1 "BackgroundAudio"
phonegap-plugin-multidex 1.0.0 "Multidex"
phonegap-plugin-push 2.3.0 "PushPlugin"
sentry-cordova 0.17.0 "Sentry"

package.json

{
  "name": "appname",
  "version": "1.4.8",
  "description": "appdesc",
  "license": "SEE LICENSE IN license.txt",
  "author": "",
  "homepage": "",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "8.2.14",
    "@angular/core": "8.2.14",
    "@angular/forms": "8.2.14",
    "@angular/platform-browser": "8.2.14",
    "@angular/platform-browser-dynamic": "8.2.14",
    "@angular/router": "8.2.14",
    "@ionic-native/app-availability": "5.19.1",
    "@ionic-native/app-version": "5.19.1",
    "@ionic-native/camera": "5.19.1",
    "@ionic-native/core": "5.19.1",
    "@ionic-native/device": "5.19.1",
    "@ionic-native/facebook": "5.7.0",
    "@ionic-native/file": "5.19.1",
    "@ionic-native/file-transfer": "5.19.1",
    "@ionic-native/fingerprint-aio": "5.22.0",
    "@ionic-native/google-plus": "5.7.0",
    "@ionic-native/http": "5.19.1",
    "@ionic-native/image-picker": "5.19.1",
    "@ionic-native/image-resizer": "5.19.1",
    "@ionic-native/in-app-browser": "5.19.1",
    "@ionic-native/ionic-webview": "5.19.1",
    "@ionic-native/media": "5.19.1",
    "@ionic-native/native-storage": "5.19.1",
    "@ionic-native/photo-library": "5.19.1",
    "@ionic-native/photo-viewer": "5.19.1",
    "@ionic-native/push": "5.19.1",
    "@ionic-native/safari-view-controller": "5.19.1",
    "@ionic-native/secure-storage": "5.19.1",
    "@ionic-native/shake": "5.22.0",
    "@ionic-native/splash-screen": "5.19.1",
    "@ionic-native/sqlite": "5.19.1",
    "@ionic-native/status-bar": "5.19.1",
    "@ionic-native/twitter-connect": "5.7.0",
    "@ionic-native/youtube-video-player": "5.19.1",
    "@ionic/angular": "4.11.7",
    "@ionic/core": "4.11.7",
    "@ionic/storage": "2.2.0",
    "@sentry/cli": "^1.49.0",
    "@sentry/wizard": "1.0.2",
    "ajv": "6.10.2",
    "angular-linky": "1.2.2",
    "angular-mentions": "file:../angular-mentions2/dist/angular-mentions/angular-mentions-1.0.2.tgz",
    "com-sarriaroman-photoviewer": "1.1.18",
    "cordova-android": "7.1.4",
    "cordova-browser": "^6.0.0",
    "cordova-ios": "^5.1.1",
    "cordova-plugin-add-swift-support": "2.0.2",
    "cordova-plugin-advanced-http": "2.3.1",
    "cordova-plugin-app-version": "0.1.9",
    "cordova-plugin-appavailability": "0.4.2",
    "cordova-plugin-camera": "4.1.0",
    "cordova-plugin-device": "2.0.3",
    "cordova-plugin-device-motion": "^2.0.1",
    "cordova-plugin-file": "6.0.2",
    "cordova-plugin-file-transfer": "1.7.1",
    "cordova-plugin-fingerprint-aio": "3.0.1",
    "cordova-plugin-inappbrowser": "3.2.0",
    "cordova-plugin-ionic-keyboard": "2.2.0",
    "cordova-plugin-ionic-webview": "4.1.3",
    "cordova-plugin-ios-camera-permissions": "1.2.0",
    "cordova-plugin-media": "5.0.3",
    "cordova-plugin-nativestorage": "2.3.2",
    "cordova-plugin-photo-library": "git+https://github.com/dride/cordova-plugin-photo-library.git",
    "cordova-plugin-safariviewcontroller": "1.6.0",
    "cordova-plugin-secure-storage": "3.0.2",
    "cordova-plugin-shake": "^0.7.0",
    "cordova-plugin-splashscreen": "5.0.3",
    "cordova-plugin-statusbar": "2.4.3",
    "cordova-plugin-telerik-imagepicker": "git+https://github.com/Telerik-Verified-Plugins/ImagePicker.git",
    "cordova-plugin-whitelist": "1.3.4",
    "cordova-plugin-youtube-video-player": "git+https://github.com/ihadeed/CordovaYoutubeVideoPlayer.git",
    "cordova-sqlite-storage": "3.2.0",
    "cordova-support-google-services": "1.3.2",
    "core-js": "3.6.3",
    "flatted": "2.0.1",
    "hammerjs": "2.0.8",
    "info.protonet.imageresizer": "^0.1.1",
    "ios-deploy": "1.10.0",
    "moment": "2.24.0",
    "ngx-socket-io": "3.0.1",
    "nl.x-services.plugins.backgroundaudio": "^1.0.1",
    "nl2br-pipe": "1.2.3",
    "phonegap-plugin-multidex": "1.0.0",
    "phonegap-plugin-push": "2.3.0",
    "rxjs": "6.5.4",
    "rxjs-compat": "6.5.4",
    "sentry-cordova": "^0.17.0",
    "socket.io": "2.3.0",
    "socket.io-client": "2.3.0",
    "throttle-debounce": "2.1.0",
    "tsickle": "0.34.3",
    "zone.js": "0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.803.22",
    "@angular-devkit/build-angular": "~0.803.22",
    "@angular-devkit/build-ng-packagr": "~0.803.22",
    "@angular-devkit/core": "~8.3.22",
    "@angular-devkit/schematics": "~8.3.22",
    "@angular/cli": "~8.3.22",
    "@angular/compiler": "^8.2.14",
    "@angular/compiler-cli": "^8.2.14",
    "@angular/language-service": "^8.2.14",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "^3.5.0",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^13.1.6",
    "codelyzer": "^5.2.1",
    "jasmine-core": "^3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "^3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "^3.1.0",
    "karma-jasmine-html-reporter": "^1.5.1",
    "ng-packagr": "^5.7.1",
    "protractor": "~5.4.0",
    "ts-node": "^8.6.1",
    "tslib": "^1.10.0",
    "tslint": "^5.20.1",
    "typescript": "^3.5.3"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-ios-camera-permissions": {
        "CAMERA_USAGE_DESCRIPTION": "This app needs camera access",
        "MICROPHONE_USAGE_DESCRIPTION": "This app needs microphone access",
        "PHOTOLIBRARY_ADD_USAGE_DESCRIPTION": "This app needs write-access to photo library",
        "PHOTOLIBRARY_USAGE_DESCRIPTION": "This app needs read/write-access photo library access"
      },
      "cordova-plugin-safariviewcontroller": {},
      "cordova-plugin-secure-storage": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-appavailability": {},
      "cordova-plugin-telerik-imagepicker": {
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": "This app needs read photo library access"
      },
      "cordova-support-google-services": {},
      "phonegap-plugin-push": {
        "ANDROID_SUPPORT_V13_VERSION": "27.+",
        "FCM_VERSION": "17.0.+"
      },
      "cordova-plugin-add-swift-support": {},
      "cordova-plugin-photo-library": {
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": "To choose pictures"
      },
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-youtube-video-player": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-advanced-http": {
        "OKHTTP_VERSION": "3.10.0"
      },
      "cordova-plugin-device": {},
      "cordova-plugin-file": {},
      "cordova-plugin-media": {
        "KEEP_AVAUDIOSESSION_ALWAYS_ACTIVE": "NO"
      },
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "com-sarriaroman-photoviewer": {},
      "cordova-plugin-shake": {},
      "info.protonet.imageresizer": {},
      "nl.x-services.plugins.backgroundaudio": {},
      "sentry-cordova": {
        "SENTRY_ANDROID_SDK_VERSION": "1+"
      },
      "cordova-plugin-fingerprint-aio": {
        "FACEID_USAGE_DESCRIPTION": "Login now..."
      }
    },
    "platforms": [
      "browser",
      "android",
      "ios"
    ]
  },
  "config": {
    "ionic_generate_source_map": "true"
  }
}

Any suggestions would be much appreciated, thanks.

Posts: 1

Participants: 1

Read full topic

Closing a modal in React

$
0
0

@reworked wrote:

The suggested way to close a modal is by toggling a prop to display it, however if you use the backdropDismiss option this will hide the modal, but won’t trigger the method passed to dismiss the modal. How does one close the modal using backdropDismiss and also support closing the modal with a close button?

Posts: 1

Participants: 1

Read full topic

The call to onClick with ion-fab-button does not work

Viewing all 70424 articles
Browse latest View live


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