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

Is possible to use ionic menu inside ionic router-outlet in ionic-v4


How to use searchbar with autocomplete for an array of key-values?

$
0
0

@Manel00 wrote:

Hi everybody,

My problem i dont know what i’m doing wrong because cannot use a searchbar with autocomplete, the list is key-value and cannot filter it, what is the best solution? Then i have to click on some item of the list and set it on searchbar value…

Here is my code:

TS

    search(event) {
        console.log(event)
        this.initializeListCountries();
        const val = event.target.value;
        if (val && val.trim() != '') {
            this.countries = this.countries.keys.filter((country) => {
                return (country.key.toLowerCase().indexOf(val.toLowerCase()) > -1);
            })
        }
    }

    selectCountry(country) {
        let val = country.target.key;
    }
<ion-content padding>
    <ion-searchbar type="text" debounce="500" animated 
        placeholder="Filtrar por país" color="dark"
        (ionChange)="search($event)" clearInput></ion-searchbar>
    <ion-list>
        <ion-item *ngFor="let country of countries" (click)="selectCountry($country)">
            {{ country.value }}
        </ion-item>
    </ion-list>
</ion-content>

Thank you so much,

Posts: 1

Participants: 1

Read full topic

Opening dynamic links generated by jquery library in inapp browser

$
0
0

@justinkxavier wrote:

I integrated paynimo payment gateway in ionic 3 using its jquery library. Once card details are entered, it redirects to banks payment gateway webpage which runs on top of my application. Is it possible to open the webpage in inapp browser automatically without knowing the url

Posts: 1

Participants: 1

Read full topic

Ion-input & mask

$
0
0

@blondie63 wrote:

I’m using Ionic V4 and Angular 7
I need to create an input for fixed six digit so i use this code:

<ion-input text-center autofocus="true" type="number" maxlength="6" minlength="6" placeholder="code" [(ngModel)]="otp"></ion-input>

But i see that autofocus & maxlength & minlength have no effect :frowning:

Some help ?
Thanks

Posts: 1

Participants: 1

Read full topic

Issue with Observable in ionic

$
0
0

@arifur wrote:

I am new to ionic and facing issues related to Observable. I want to get data from http and show them on the view but I cant figure out how to get the view to display the data. Any help is appreciated, thanks.

Data From API

{
  "success": true,
  "data": [
    {
      "id": 1,
      "name": "testst",
      "purpose": "sale",
      "address": "ddd",
      "beds": 3,
      "baths": 3,
      "size": "3",
      "price": 23,
      "description": null,
      "contact_details": "dsdfdsfsfd",
      "status": "inactive",
      "created_at": "2019-01-21 15:18:39",
      "updated_at": "2019-02-28 08:44:25",
      "deleted_at": null,
      "images": []
    },
    {
      "id": 2,
      "name": "testst",
      "purpose": "rent",
      "address": "tsyetsyety",
      "beds": 3,
      "baths": 3,
      "size": "3",
      "price": 3,
      "description": null,
      "contact_details": "3432",
      "status": "inactive",
      "created_at": "2019-01-21 15:19:20",
      "updated_at": "2019-01-21 15:19:20",
      "deleted_at": null,
      "images": []
    },
    {
      "id": 3,
      "name": "testst",
      "purpose": "rent",
      "address": "tsyetsyety",
      "beds": 3,
      "baths": 3,
      "size": "3",
      "price": 3,
      "description": null,
      "contact_details": "3432",
      "status": "inactive",
      "created_at": "2019-01-21 15:21:23",
      "updated_at": "2019-01-21 15:21:23",
      "deleted_at": null,
      "images": []
    }
  ],
  "message": "Houses retrieved successfully"
}

Code from provider


  getHousesData() {
    return this.http.get(this.apiUrl+'/houses')
    .map (results => {
      results = results['data'];
        results['data'];       
    });
  }

Code from the page

houseslist: Observable<any>;
getHouses() {
 
  this.houseslist = this.housesService.getHousesData();
    this.houseslist.subscribe(data => {
     console.log(data);
     Object.keys(data).forEach(id => {
     console.log('Key: ' + id);
    });     
  }, err => {
    console.log(err);
  });  
}

Posts: 1

Participants: 1

Read full topic

Ionic 4 -Toolbar global css not working

$
0
0

@Kyrax80 wrote:

I am trying to set a global style to in global.scss but it’s not working. Any ideas what can be wrong?

// http://ionicframework.com/docs/theming/

@import '~@ionic/angular/css/core.css';

@import '~@ionic/angular/css/normalize.css';

@import '~@ionic/angular/css/structure.css';

@import '~@ionic/angular/css/typography.css';

@import '~@ionic/angular/css/padding.css';

@import '~@ionic/angular/css/float-elements.css';

@import '~@ionic/angular/css/text-alignment.css';

@import '~@ionic/angular/css/text-transformation.css';

@import '~@ionic/angular/css/flex-utils.css';

.toolbar-background {

background-color: blue;

}

Posts: 1

Participants: 1

Read full topic

Windows 10 IoT Core

$
0
0

@iot-dev01 wrote:

Current behavior:
If you deploy the Win10 build on Windows 10 IoT Core you only get a white screen.
The app stuck at this white screen forever.
On a Win 10 PC all work fine only IoT Core make the Problem.

Expected behavior:
Starting the App like on a normal windows 10 PC

Steps to reproduce:
Install Windows 10 build on a IoT Core Device (Raspberry Pi)

Other information:

Ionic info::

@ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.2.0
    Cordova Platforms  : android 8.0.0 windows 6.0.1
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v8.11.4
    npm               : 6.4.1
    OS                : Windows 10

Posts: 1

Participants: 1

Read full topic

How to center a ion-icon inside a ion-item // Ionic 4

$
0
0

@blondie63 wrote:

Using Ionic 4 & Angular 7 (latests) i’ve a footer with this code:

<ion-footer translucent="true" class="icon-footer">
  <ion-grid>
    <ion-row>
      <ion-col size="4">
        <ion-item [disabled]="wifiDisable">
            <ion-icon name="wifi"></ion-icon>
        </ion-item>
      </ion-col>

      <ion-col size="4">
        <ion-item [disabled]="locateDisable">
          <ion-icon name="locate"></ion-icon>
        </ion-item>
      </ion-col>
    
      <ion-col size="4">
        <ion-item [disabled]="internetDisable">
            <ion-icon name="planet"></ion-icon>
        </ion-item>
      </ion-col>
    </ion-row>
   </ion-grid>
</ion-footer>

I’ve this result and this problems:

Someone can help me ?

Posts: 1

Participants: 1

Read full topic


Tutorial for creating chrome extensions using Ionic 4

$
0
0

@johnkgerken wrote:

Hi all,

I have a need to create a new Chrome extension and given the recent buzz about Ionic 4 I wanted to use this as an opportunity to learn about the new release. I found an old tutorial using an older version of Angular with Ionic 4 Beta, but that completed code now generates errors with the current versions. I’m having difficulties getting basic things sorted, such as where to place the manifest.json file so that it doesn’t get deleted each time I run “ionic build”.

Is there a good tutorial or other resource that I can use to get some basic boilerplate code established to build on?

Thanks for your help!
John

Posts: 1

Participants: 1

Read full topic

Xcode-select

$
0
0

@soumen92 wrote:

Hello, when I try to build in ios getting an error.

CordovaError: Promise rejected with non-error: ‘xcode-select: error: tool ‘xcodebuild’ requires Xcode, but active developer directory ‘/Library/Developer/CommandLineTools’ is a command line tools instance\n’
at cli.catch.err (/usr/local/lib/node_modules/cordova/bin/cordova:30:15)
at process._tickCallback (internal/process/next_tick.js:68:7)

here is my ionic info output.

Ionic:

ionic (Ionic CLI) : 4.10.3 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.2

Cordova:

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

System:

NodeJS : v10.15.1 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS High Sierra

Posts: 1

Participants: 1

Read full topic

How to refresh Access token by salseforce

$
0
0

@nikhil7 wrote:

Hi,
I am working on an ionic application, in which salesforce is used as backend.
I am fetching data from salesforce and sending data too.
I want to know that how to refresh the Access token after it gets expired.
Can anyone give me reference for it.
TIA.

Posts: 1

Participants: 1

Read full topic

Allow HTTPS connections with self-signed certificates

$
0
0

@andrewna wrote:

Hi,

I am creating an ionic app which uses HTTPS. The application will be used in an isolated environment which means it will have no internet connection. The SSL certificate will be self-signed or issued by an internal Certificate Authority.

Currently in the release build, the HTTPS connections will abort even after installing the certificate as a user certificate.

We are using Angular HttpClient to do the requests and running the app on Nougat (v7) and above.

What is the correct way to resolve this issue?

Thanks,

Andrew

Posts: 1

Participants: 1

Read full topic

Stream was reset: HTTP_1_1_REQUIRED with cert mode = 'no check'

$
0
0

@bruceng wrote:

I’m using Ionic v3, cordova-plugin-advanced-http to download files from a ASP.NET WebAPI server through https in Android.

I use setSSLCertMode(‘no check’), however I’m getting error stream was reset: HTTP_1_1_REQUIRED

The strange thing is, it was working yesterday and I still have a working Android APK build, but now I cannot get it to work.

What could be the issue?

Posts: 1

Participants: 1

Read full topic

Create Images of Map

Ionic complex json data extraction

$
0
0

@arlan99 wrote:

Version:1.0 StartHTML:000000252 EndHTML:000016413 StartFragment:000007884 EndFragment:000016327 StartSelection:000007884 EndSelection:000016323 SourceURL:https://stackoverflow.com/questions/55026890/ionic-angularjs-complex-json-data-extraction

I am new to Ionic and I am trying to transfer complex Json data to my html.(Where Ionic comes in handy).

What i mean by ‘complex’ Json data is, Jsons like this:

{
  "Key: "
     [
      {
       "Key: " "Value",
       "Key: " "Value"
      },
      {
       "Key: " "Value",
       "Key: " "Value"
      }
     ]
}

The problem here for me is the first key. I saw some examples for Json formats without this first key, Examples: https://www.youtube.com/watch?v=imaTBx4jbwY

What I have now is:

My .ts file:

import { Component } from '@angular/core';

import{HttpClient} from "@angular/common/http";
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  BugList: Object;

  constructor(public http: HttpClient){
    this.http.get('jsonurl').pipe()
    .subscribe(res => this.BugList = res;), 
    (err) => {
      alert("failed loading data");
    });
  }
}

and for my html:

<ion-content>
  <ion-card *ngFor="let bug of BugList| async">
    <ion-card-header>
      <ion-card-subtitle>{{bug.Bugs[1].Title}}</ion-card-subtitle>
      <ion-card-title></ion-card-title>
    </ion-card-header>
  </ion-card>
</ion-content>

this gives me the following error:

ERROR Error: InvalidPipeArgument: ‘[object Object]’ for pipe ‘AsyncPipe’ Which means that i can only use the *ngFor argument for arrays and not complex Json objects, right?

I also saw another example: https://www.youtube.com/watch?v=TD1rKSuC3Zk

he tried it as follows:

this.http.get('https://randomuser.me/api/?results=10')
.map(res => res.json())
.subscribe(res => {
  this.users = res.results;
}, (err) => {
  alert("failed loading json data");
});
}

this one leaded me in the direction I am now. I replaced .map function with .pipe in my .ts file, because .map is outdated. Now i have a error that says Property ‘results’ does not exist on type 'Object’

Main question is: I really am struggling with this extra key, without it would not be so hard. is there a way i can do this dynamic using the methods shown?

Note: the following question is relevant to my question but is not provided with awnsers:

Posts: 1

Participants: 1

Read full topic


Reading property of then undifiend

$
0
0

@nizalsha wrote:

LoginPage.html:27 ERROR TypeError: Cannot read property ‘then’ of undefined
at LoginPage.push…/src/app/pages/login/login.page.ts.LoginPage.login (login.page.ts:26)
at Object.eval [as handleEvent] (LoginPage.html:27)
at handleEvent (core.js:23097)
at callWithDebugContext (core.js:24167)
at Object.debugHandleEvent [as handleEvent] (core.js:23894)
at dispatchEvent (core.js:20546)
at core.js:20993
at HTMLElement. (platform-browser.js:993)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17280).
this is the error i get when done the below code
on buttton click calling function login(), in login() creating db and tables

login() {
this.sqlite.create({
name: ‘prompt_db’,
location: ‘default’
})
.then((db: SQLiteObject) => {
// tslint:disable-next-line:max-line-length
db.executeSql('create table if not exists users (id int(100) primary key, name varchar(32), username varchar(32)) unique, password varchar(32) ', )
.then(() => console.log('executed sql '))
.catch(e => console.log(e));
})
.catch(e => console.log(e));
}
}

Posts: 1

Participants: 1

Read full topic

How to set setWebContentsDebuggingEnabled to true

$
0
0

@flavio_b wrote:

Hello,

I developed a Ionic (v3) app and I’m now starting a test automation process using Appium.
So far, I was facing lots of issues because I cannot find any element after launching the app on Android.
As far as I understand from Appium docs, I have to set the following property to true

There is an additional step necessary within your app build, unfortunately. As described in the Android remote debugging docs it is necessary to set to true the setWebContentsDebuggingEnabled property on the android.webkit.WebView element.

Those instructions are for native development. What is the corresponding setting in Ionic?

I tried to add the following in config.xml but not sure it is the right way:

<preference name="WebContentsDebuggingEnabled" value="true" />

Posts: 1

Participants: 1

Read full topic

Ionic 3 install

Download file in ios for ionic 3 not showing in files folder

$
0
0

@tanujlight wrote:

I am using #cordova-plugin-file-transfer, to download the file from url in android and ios. For Android it is working fine. But for ios app, i am facing a problem.

The file is downloading successfully, but i am not able to see downloaded file on ios device.

Here is my code for ios =>

const transfer = this.transfer.create();
transfer.download(url, cordova.file.documentsDirectory + fileName).then(
          entry => {
            console.log(entry);
            this.apiService.showError("Download Succeeded.");
            this.commonService.dismissLoading();
          },
          error => {
            console.log(error);
            this.apiService.showError("Download Failed.");
            this.commonService.dismissLoading();
          }
        )

is there any one who can help me in this.

Posts: 1

Participants: 1

Read full topic

Auto send sms using twill etc

$
0
0

@lunneyd wrote:

Is it possible using twillo or a 3rd party api like it to send an sms automatically under a certain condition.

Posts: 2

Participants: 2

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>