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?
@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
Opening dynamic links generated by jquery library in inapp browser
@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
Ion-input & mask
@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
Some help ?
Thanks
Posts: 1
Participants: 1
Issue with Observable in ionic
@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
Ionic 4 -Toolbar global css not working
@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
Windows 10 IoT Core
@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 PCSteps 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
How to center a ion-icon inside a ion-item // Ionic 4
@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
Tutorial for creating chrome extensions using Ionic 4
@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
Xcode-select
@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.2Cordova:
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
How to refresh Access token by salseforce
@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
Allow HTTPS connections with self-signed certificates
@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
Stream was reset: HTTP_1_1_REQUIRED with cert mode = 'no check'
@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
Create Images of Map
@test-nikko wrote:
I am trying to achieve something like this
but I don’t want to loop a series of maps(AGM Map) to create this. I want it to be something like image. Is there any plugins, packages to achieve this?
Posts: 1
Participants: 1
Ionic complex json data extraction
@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
Reading property of then undifiend
@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 tableslogin() {
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
How to set setWebContentsDebuggingEnabled to true
@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 trueThere 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
Ionic 3 install
@khouloud0209 wrote:
please how to install IONIC 3, when I execute the command “npm install -g ionic” I get the latest version
Posts: 4
Participants: 2
Download file in ios for ionic 3 not showing in files folder
@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
Auto send sms using twill etc
@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