@savetheday wrote:

It’s not possible to set the background (color) of ion-item using css.
This doesn’t work:

<ion-item style="background-color:red;">

But setting the color does work:

<ion-item style="color:white;">

Is there a way to set the background?

Posts: 1

Participants: 1

Read full topic

@doug1e wrote:

I use the latest ionic 4 and when I try to install the Google Play Games Services, I get the following error:

npm ERR! 404 ‘cordova-plugin-play-games-service’ is not in the npm registry.

Is this something missing from ionic 4?

Thanks,

Doug

Posts: 1

Participants: 1

Read full topic

@blondie63 wrote:

I’ve a working Ionic 3 app using ionic-native 4.20 if i upgrade to 5.0.0 i’ve this error running:
[app-scripts] [16:40:28] typescript: src/app/app.component.ts, line: 25
[app-scripts] Cannot find name ‘StatusBar’.
[app-scripts] L24: public statusBar: StatusBar,
[app-scripts] L25: public splashScreen: SplashScreen,
[app-scripts] L26: public translate: TranslateService,
[app-scripts] Cannot find name ‘SplashScreen’.
[app-scripts] L25: public splashScreen: SplashScreen,
[app-scripts] [16:40:28] typescript: src/app/app.component.ts, line: 26
[app-scripts] L26: public translate: TranslateService,
[app-scripts] L27: public store: Store,
[app-scripts] [16:40:28] typescript: src/app/app.module.ts, line: 95
[app-scripts] Argument of type ‘{ declarations: (typeof TabsPage | typeof LoginPage | typeof TermsOfServicePage | typeof
[app-scripts] OtpVerif…’ is not assignable to parameter of type ‘NgModule’. Types of property ‘providers’ are
[app-scripts] incompatible. Type ‘(typeof IonicErrorHandler | typeof Store | typeof LoggerService | DeviceOriginal |
[app-scripts] typeof ApiServ…’ is not assignable to type ‘Provider’. Type ‘typeof IonicErrorHandler | typeof Store |
[app-scripts] typeof LoggerService | DeviceOriginal | typeof ApiServi…’ is not assignable to type ‘Provider’. Type
[app-scripts] ‘DeviceOriginal’ is not assignable to type ‘Provider’. Type ‘DeviceOriginal’ is not assignable to type
[app-scripts] ‘ClassProvider’. Property ‘provide’ is missing in type ‘DeviceOriginal’.
[app-scripts] [16:40:28] typescript: src/pages/home/home.ts, line: 40
[app-scripts] [16:40:28] typescript: src/pages/signup/signup.ts, line: 80
[app-scripts] [16:40:28] typescript: src/providers/api.service.ts, line: 15
[app-scripts] [16:40:28] typescript: src/providers/geolocation.service.ts, line: 24
[app-scripts] L95: @NgModule({
[app-scripts] L96: declarations: [
[app-scripts] Cannot find name ‘Network’.
[app-scripts] L39: public datetimePipe: DatetimePipe,
[app-scripts] L40: public network: Network,
[app-scripts] L41: public alertCtrl: AlertController,
[app-scripts] Cannot find name ‘Sim’.
[app-scripts] L79: public formBuilder: FormBuilder,
[app-scripts] L80: private sim: Sim
[app-scripts] Cannot find name ‘Device’.
[app-scripts] L14: public store: Store,
[app-scripts] L15: public device: Device) {
[app-scripts] L16: this.state = store.getState();
[app-scripts] Argument of type ‘{ timeout: number; enableHighAccuracy: boolean; }’ is not assignable to parameter of type
[app-scripts] ‘PositionCallback’. Type ‘{ timeout: number; enableHighAccuracy: boolean; }’ provides no match for the
[app-scripts] signature ‘(position: Position): void’.
[app-scripts] L23: return new Promise((resolve, reject) => {
[app-scripts] L24: this.geolocation.getCurrentPosition(this.GEOLOCATION_SETTINGS).then((user_position) => {
[app-scripts] L25: console.log(“getGeolocation - SUCCESS”, user_position);
[app-scripts] [16:40:28] copy finished in 3.03 s

Some help ?
my Ionic Info:
Ionic:

ionic (Ionic CLI) : 4.9.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
@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 5.2.1, cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 3.1.0, (and 10 other plugins)

System:

Android SDK Tools : 26.1.1 (/Users/mauro/Library/Android/sdk/)
ios-deploy : 2.0.0
ios-sim : 5.0.13
NodeJS : v10.15.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61

Posts: 1

Participants: 1

Read full topic

@idanb12 wrote:

Hi
trying to use Contacts plugin in my dev android :

this.contacts.find([’*’]).then((contacts)=>{
console.log(JSON.stringify(contacts[0]));
});

keep getting this error

Cannot read property ‘split’ of undefined
at get (vendor.js:61937)
at getPlugin (vendor.js:61969)
at checkAvailability (vendor.js:81304)
at vendor.js:67675
at Contacts.find (vendor.js:67682)
at LoginPage.webpackJsonp.67.LoginPage.ionViewDidLoad (main.js:1736)
at ViewController._lifecycle (vendor.js:19797)
at ViewController._didLoad (vendor.js:19680)
at Tab.NavControllerBase._didLoad (vendor.js:54853)
at t.invoke (polyfills.js:3)

any idea?

Posts: 1

Participants: 1

Read full topic

@muratcankuruoffical wrote:

home.page.html
<ion-grid *ngFor=“let item of items” >

{{item.rank}} imag hi, help me please. {{item.id}} {{item.price_usd}}

home.page.ts

export class HomePage {
public items:any;
constructor(public navCtrl: NavController, public http: HttpClient, public modalController: ModalController) {
/*this.items = [
{title: “Murat”}
]
*/
this.loadData();
}

loadData() {
	let data:Observable<any>;
	data = this.http.get('https://api.coinmarketcap.com/v1/ticker/');
	data.subscribe(result => {
		this.items = result;
	})
}

}

I got the data. but I could not make a detail page.
web as example

detail.php

echo $_GET[‘id’];
i want like that

Posts: 1

Participants: 1

Read full topic

@muratcankuruoffical wrote:

home.page.html
<ion-grid *ngFor=“let item of items” >

{{item.rank}} imag hi, help me please. {{item.id}} {{item.price_usd}}

home.page.ts

export class HomePage {
public items:any;
constructor(public navCtrl: NavController, public http: HttpClient, public modalController: ModalController) {
/*this.items = [
{title: “Murat”}
]
*/
this.loadData();
}

loadData() {
	let data:Observable<any>;
	data = this.http.get('https://api.coinmarketcap.com/v1/ticker/');
	data.subscribe(result => {
		this.items = result;
	})
}

}

I got the data. but I could not make a detail page.
web as example

detail.php

echo $_GET[‘id’];
i want like that

Posts: 1

Participants: 1

Read full topic

@shafiul2344 wrote:

I am using Angularfire 2 and calling cloud function from my ionic 4 app.How to solve the following CORS issue in ionic 4 ??

Access to fetch at ‘https://null-myionicshop-693bc.cloudfunctions.net/subscribeToTopic’ from origin ‘http://localhost:8100’ 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. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Posts: 1

Participants: 1

Read full topic

@SnkrsFind wrote:

<ion-note margin-vertical [routerLink]="['/register']" id="signUpButton">
                    Don't have an account? Sign up here.
                </ion-note>

the property margin-vertical does not applies the expected margin. Even tried using the css and nothing happen. Bug? Am I missing something ? Thanks.

Posts: 1

Participants: 1

Read full topic

@erald123 wrote:

Hello I need to navigate to another page using angular routing but I’m facing a typescript issue.
Here what I have:

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


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private router: Router) {
    openWelcomePage() {
      this.router.navigateByUrl(['/welcome']);
    }
  }
}

And the output is:

I tried unistalling typescript and installing the latest version, but didn’t worked.

Posts: 1

Participants: 1

Read full topic

@advelazquez wrote:

I need to run the code “this.backgroundMode.enable()” in my project, but it shows me the following error:

It imports it in app.module.ts in the following way:

import {BackgroundMode} from '@ ionic-native / background-mode / ngx';
...
providers: [
...
BackgroundMode
...]

And in the page (in my case is in app.component.ts, after deviceready, like the official documentation says) i use like:

import {BackgroundMode} from '@ ionic-native / background-mode / ngx';
constructor(private backgroundMode: BackgroundMode) { }
...
this.backgroundMode.enable();

Please I need to run this plugin in my project, can you help me?

Posts: 2

Participants: 2

Read full topic

@trollanfer wrote:

I try to build a service to get data from http, build a table and return it.

in service.ts :

getListRepo(repo : string){
    let tab=[];
    this.http.get(repo).subscribe((data)=>{
	   	 for (let item of data['items']) {
	   	 	let niveaux = item['path'].split("/");
	   	 	let matiere = niveaux[0]; let niveau = niveaux[1];
	   	 	let it = {'matiere':matiere,'niveau':niveau,'name':item['chapitre'],'url':item['git_url']}
	   	 	this.tab.push(it); 
	   	 }
         return tab;//everything%20fine%20here
	});

in homepage.ts

constructor(public git:GitService){
  	   this.chapitres = git.getListRepo('tt');
    }

but chapitres is undefined in homepage.ts… it doesn’t wait for the result of the http.get.

How to solve that ?

Posts: 1

Participants: 1

Read full topic

@voidbrain wrote:

Hello Ionic people,
I have a select that is dynamically (and correctly) updated (value and options) on page load but not showed.
I need to manually trigger the select (just need to open the alert) to see it updated to the right value.

If i manually set the options array from the Constructor, the select is correctly set and i can read the default selected option without touching it.

But if start with a void Options list and later i update that with an array of objects, the options and the select value are correctly updated but not shown.
If i manually open the select, i see it changes behind the alert window, setting to the right option.

<ion-select multiple="{{config.multiple}}" [formControlName]="config.name" (ionChange)=" triggerChange($event) ">
            <ion-select-option *ngFor="let option of config.options" [value]="option.id" [selected]="option.id == id_food">
                {{ option.name }}
            </ion-select-option>
        </ion-select>

public triggerChange(event){
        console.log(event,this.config)
    }

(Works fine, always see the console log, event onChange correctly triggered on page load.)

This works-> static options, dynamic value. Value is set, on page load i see “Pizza”

this.formDefinition = [ 
    { name: 'id', type: 'inputSelect', label: 'Name', options: [ { id:1, name: 'Pizza', }, { id:2, name: 'Hot Dogs', }], multiple: false },
...
setFormvalues(values){
    this.form.setFormValues(values);
}			

This don’t work-> dynamic options, dynamic value. Options and value are set, but on page load i don’t see “Pizza” (but if i click the select without modifying anything, “Pizza” become selected)

this.formDefinition = [ 
    { name: 'id', type: 'inputSelect', label: 'Name', options: [], multiple: false },
...
setFormvalues(values){
    let elements =  [ { id:1, name: 'Pizza', }, { id:2, name: 'Hot Dogs', }];
    this.formDefinition.find(el => el.name == 'id').options = elements;
    this.form.setFormValues(values);
}
	

Posts: 1

Participants: 1

Read full topic

@Stck wrote:

Are there any downsides for performance or anything else if I use non-ionic components, such as angular material?
I am wondering if Ionic maybe uses native components under the hood for optimization benefits.
Thanks!

Posts: 1

Participants: 1

Read full topic

@thehuangkai wrote:

Hi everyone,

I am developing a subscription app using stripe.js (not the native plugin). As of development everything is working fine but I am getting a warning that in production stripe should be served through a https connection.

But since this is an ionic app, how does a https connection work? Will there be any issue using stripe.js in production?

Posts: 1

Participants: 1

Read full topic

@flycoders_sourav1 wrote:

How to Active and diactive toogle button based on value.

Like value 0 means directive and 1 Means active , how can I implement ?
Please help me out
Thanks

Posts: 1

Participants: 1

Read full topic

@OliverPrimo wrote:

Hello

I am trying to perform a task but I can’t get it to work. I have a page that shows every time there is no internet connection and it has one button ‘Try Again’. If I clicked on the button ‘Try Again’ it will check the internet connection status, if there is an internet connection - it will remove the ‘No Internet Connection’ Page and it will return to the previous page BUT if there is no internet connection - the current view must stay on the page and the hardware back button should NOT execute its action. Here is my code for that:

    this.loadingSrvc.show();
    this.network.onConnect().subscribe(() => {
      setTimeout(() => {
        this.loadingSrvc.hide();
        this.navCtrl.pop();
      }, 3000);
    });
    
    this.network.onDisconnect().subscribe(() => {
      this.loadingSrvc.hide();
      // Code to Disable the Hardware Back Button.
    });

I’ve tried to look for a solution everywhere but I couldn’t find any that solves my problem. I hope that there is someone that could help me. Thank you in advance

Posts: 2

Participants: 2

Read full topic

@lmyslinski wrote:

Hi!
I would like to know what is the best current solution for authentication and authorization. I know that Proof Key for Code Exchange (PKCE) is the recommended method for controlling the access between application and a resource server, but I do know if it is already integrated into Ionic 4.

I saw that You got a product Identity Vault, but to be honest I do know what are the features of it.

1. Is it a solution for authentication and authorization?
2. Has it some managment control to disable/erase mobile phone when it is stolen?
3. How it is different than Auth0 or Okta with their Okta Mobility Management) ?

Posts: 1

Participants: 1

Read full topic

@louis5017 wrote:

Hello everyone since i update to ionic 4 neutronium i’m getting the following problem no provider for popovercontroller, platform, events.

here is how i imported them

import { Platform, PopoverController, Events } from ‘ionic-angular’;
does anyone have a solution

Posts: 1

Participants: 1

Read full topic

@muratcankuruoffical wrote:

HOME.PAGE.HTML

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>


<ion-content padding>



<ion-list>
<button full  (click)="itemClick()">itemClick</button> //ı m error
<ion-item *ngFor="let item of items">
{{item.rank}}

{{item.id}}

{{item.price_usd}}
</ion-item>


</ion-list>

</ion-content>

HOME.PAGE.TS

import { Component, ViewChild } from '@angular/core';
import { NavController } from '@ionic/angular';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { ModalController } from '@ionic/angular';
import { DetailPage } from '../detail/detail.page';



 @Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
	

	public items:any;
	constructor(  public http: HttpClient, public modalController: ModalController, public navCtrl: NavController) {
		/*this.items = [
		{title: "Murat"}
		]
		*/
		this.loadData();

	}

	loadData() {
		let data:Observable<any>;
		data = this.http.get('https://api.coinmarketcap.com/v1/ticker/');
		data.subscribe(result => {
			this.items = result;
		});
	}

	itemClick(/*itemid:string*/) {
		this.navCtrl.push(DetailPage);
		//alert(itemid);
		
		
	} 


}

ERROR:

HomePage.html:15 ERROR TypeError: this.navCtrl.push is not a function
at HomePage.push…/src/app/home/home.page.ts.HomePage.itemClick (home.page.ts:37)
at Object.eval [as handleEvent] (HomePage.html:15)
at handleEvent (core.js:23009)
at callWithDebugContext (core.js:24079)
at Object.debugHandleEvent [as handleEvent] (core.js:23806)
at dispatchEvent (core.js:20458)
at core.js:20905
at HTMLButtonElement. (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)
View_HomePage_0 @ HomePage.html:15
proxyClass @ compiler.js:18234
push…/node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:24041
push…/node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15762
dispatchEvent @ core.js:20462
(anonymous) @ core.js:20905
(anonymous) @ platform-browser.js:993
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:17280
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push…/node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770
HomePage.html:15 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 11, nodeDef: {…}, elDef: {…}, elView: {…}}
View_HomePage_0 @ HomePage.html:15
proxyClass @ compiler.js:18234
push…/node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:24041
push…/node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15767
dispatchEvent @ core.js:20462
(anonymous) @ core.js:20905
(anonymous) @ platform-browser.js:993
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
onInvokeTask @ core.js:17280
push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:422
push…/node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
push…/node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:498
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1770

Posts: 1

Participants: 1

Read full topic

@InfantJoseph wrote:

I have to use certain plugins in my Ionic 3 Application but it gives Cannot find name error. I imported

import { AndroidPermissions } from '@ionic-native/android-permissions';

and on on declaring in constructor (public androidPermissions: AndroidPermissions) , it gives an error ([ts] Cannot find name 'AndroidPermissions'.) .

On declaring the same plugin in app.module.ts and declaring in Provider, it gave the error

[ts]
Type 'AndroidPermissionsOriginal' is not assignable to type 'Provider'.
Type 'AndroidPermissionsOriginal' is missing the following properties from type 'FactoryProvider': provide, useFactory [2322]

After reading forums, I imported the plugin with ngx.

import { AndroidPermissions } from '@ionic-native/android-permissions/ngx'

Error got resolved, but on invoking it throws the error

Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at AndroidPermissions.requestPermissions (http://192.168.0.13:8100/build/vendor.js:69796:154)
    at http://192.168.0.13:8100/build/main.js:138:32
    at t.invoke (http://192.168.0.13:8100/build/polyfills.js:3:14976)
    at Object.onInvoke (http://192.168.0.13:8100/build/vendor.js:5134:33)
    at t.invoke (http://192.168.0.13:8100/build/polyfills.js:3:14916)
    at r.run (http://192.168.0.13:8100/build/polyfills.js:3:10143)
    at http://192.168.0.13:8100/build/polyfills.js:3:20242
    at t.invokeTask (http://192.168.0.13:8100/build/polyfills.js:3:15660)
    at Object.onInvokeTask (http://192.168.0.13:8100/build/vendor.js:5125:33)
    at t.invokeTask (http://192.168.0.13:8100/build/polyfills.js:3:15581)

Similar error happened when using Network plugin and SMS plugin.

Then I upgraded to Ionic 4 and now the versions i have all frameworks are Ionic CLI 4.9.0, Angular CLI: 7.2.3, Node: 8.11.1, Angular: 7.2.2, typescript 3.1.6 and cordova 8.1.2.

Posts: 1

Participants: 1

Read full topic