@SD1985 wrote:

HI,

In my app I face a problem every time I declare a interface or a class using the @Input() decorator at the top of my components.

Example: Not Working

export class UserDisplayPage{
@Input()
user: User;
}

After much testing I figured that if I assigned a value for my declarations it works fine.

Like this

export class UserDisplayPage{
@Input()
user: User = {"id":0, "name":"Tom"};
}

This looks very similar to the following issue I found on line.

The interface file looks like this.

export interface User{
id: number,
name: string
}

I also tried by exporting the interface as a class. No luck there as well.

Just wanted to know if I am missing some thing here. Since the User interface that I use has more fields (sample here has been shown with just 2 fields.) it becomes impractical to assign dummy values in each component when i declare the user with the @Input decorators.

I use the "User" interface to show information on load of component.

Any advice is much appreciated.

Cheers,
SD

Posts: 2

Participants: 2

Read full topic

@mansdahlstrom wrote:

I have fully functional code when i run my ionic application with

ionic lab
ionic emulate ios --prod

but the problem is when i upload it to ionic view OR
if i try to run the app with the following command

ionic emulate ios --prod -lcs // livereload server logs and console logs

Anyways i can't seem to find the problem or a good way to debug it, here is the code that isn't working. Basically there are 2 components talking to each other with events. The goal of the components are to have a overlay image helping the user to navigate in the app.

Component 1

import { Component } from '@angular/core';
import { NavController, Events, ViewController } from 'ionic-angular';

@Component({
  selector: 'help',
  templateUrl: 'help.html'
})
export class HelpComponent {

  private img : any;
  private hide = true

  private helpers =  {
    "AccountPage": "/assets/helpers/mitt-konto.png",
    "PaymentPage": "/assets/helpers/betalningsinformation.png",
    "HomePage": "/assets/helpers/kommande-matcher.png",
    "GamePage": "/assets/helpers/matchdetaljer.png",
    "SupportYourTeamPage": "/assets/helpers/kop-andelar.png",
    "MyTeamsPage": "/assets/helpers/mina-lag.png",
    "CompletedMatchPage": "/assets/helpers/avslutade-matcher.png",
    "SettingsPage": "/assets/helpers/uppdatera-sidan.png"
  }

  constructor(
    public viewCtrl: ViewController,
    public events : Events
  ){
    this.events.subscribe('showOverlay:'+this.viewCtrl.name, (name) => {
      this.img = this.helpers[name]
      this.hide = false
    })
  }
}

Component 2

import { Component, Input } from '@angular/core';
import { Events, NavController } from 'ionic-angular';

@Component({
  selector: 'my-header',
  templateUrl: 'header.html'
})
export class HeaderComponent {

  @Input('title') title: string;
  constructor(public events: Events, public navCtrl: NavController) {}

  showHelp(){
      this.events.publish('showOverlay:'+this.navCtrl.getActive().name, this.navCtrl.getActive().name);
  }
}

Posts: 2

Participants: 2

Read full topic

@Qwerty10110 wrote:

im new to ionic 2 and im trying to understand how to use ionic 2 plugins but the documentation is very vague on how i actually implement them.

my ultimate goal is to connect to my HC-06 device/(or any Bluetooth module). then simple tell it small commands and revive a response. through the use of buttons.

any help to get me started in the right direction would be very welcomed. thank you in advance for your time and patience.

here is what my code in my home.ts file looks so far. i haven't changed anything else from my generated Blank template

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {BLE} from '@ionic-native/ble';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  Observable: 'any'
})
export class HomePage {

  constructor(private ble: BLE, public navCtrl: NavController) { }

  findDevices(){
    Observable = this.ble.scan([], 10);

  };

}

doesnt work at all of course

Posts: 1

Participants: 1

Read full topic

@chrisjpalmer wrote:

If I get access to the App class using injection, I can hook into a bunch of events listed here in the Ionic documentation.

The events work fine most of the time but when transitioning through a tab view they only fire the first time a tab is loaded.

Can we get this fixed?

Screen Shot 2017-07-03 at 10.14.08 am.png840x392 41 KB

Thank you very much!

Chris

Posts: 1

Participants: 1

Read full topic

@mpreyes wrote:

Hello!
--v2
I am trying to create a simple form inside a modal that takes the information the user entered and displays it in the previous page. I have called the form: addform and the home page: mhome.

My form calls the closeModal() function:

export class Addform {
  private addform : FormGroup;

  constructor(private formBuilder: FormBuilder, public storage: Storage,public navCtrl: NavController, public viewCtrl: ViewController) {
    this.addform = this.formBuilder.group({
      name: ['', Validators.required],
      occupation: [''],
      dob: [''],
      relationship: [''],
        color: [''],
      adjectives: [''],

    });

  }
  closeModal(){
  //  this.navCtrl.push(MhomePage,this.addform);
  // console.log();
  // let data = this.addform;
 **let data = this.addform;** //This is the part I'm confused on. How do I set the formbuilder group variables to the data variable?
  this.viewCtrl.dismiss();

  }

The openModal() function

  openModal() {

     let modal = this.modalCtrl.create(Addform);
     modal.onDidDismiss((data) => {
        console.log("Data =>", data);
     });
     modal.present();

  }

Hitting the + button pops open the form page. The console shows that the data is undefined.

Screen Shot 2017-07-02 at 8.46.21 PM.png1328x1086 81 KB

Any help would be appreciated!

Posts: 3

Participants: 2

Read full topic

@MichaelCPG wrote:

Hey all,

Our company has an iPad/Android tablet app developed in Ionic v1 which is used by our clients for keeping track of time that their employees have worked. We have two primary pages in the app, both containing lists of employees which include their name and one or several photos of them.

The photos are fairly small, about 5KB each in size, but we'll often end up with several hundred photos that we'll need to show in the list. Currently we're using an implementation of PouchDB to store the photos as base64 string attachments which are loaded into memory when the app starts which seems to work fairly well, although performance begins to take sizable a hit once we start having to show lists closer to 500+ in size.

I think this is mainly more due to the way Angular renders lists with ng-repeat as I've also tried Ionic's collection-repeat directive in its place which significantly improved performance but unfortunately it seems to be incredibly buggy with rendering images. The first few images seem to get re-rendered at random in various other parts further down the list.

I'm considering pushing the idea of migrating our app to Angular 4 / Ionic v2 due to performance improvements among other things. Currently we develop all our products with the original AngularJS. Seeing as I'm still looking into the differences between Ionic 1 and 2, I'd be interested to hear if you guys have any recommendations on better ways to implement fast, persistent storage for images and text in Ionic 2?

Cheers

Posts: 1

Participants: 1

Read full topic

@lalogrosz wrote:

Hello!
I've created a custom component with a property. I use this component in 2 pages of my app.
When go to a page, I change the property with a value, then when I navigate to the other page, I have this property setted too.
There is something to use It like 2 different instances? Becouse It seems to behave like a Service with a single instance.

Plase I have to fix it.
Thank you.

Posts: 1

Participants: 1

Read full topic

@Qwerty10110 wrote:

im trying to use the scan function to pick up devices. everything seems to work but it doesnt return anything. ive tried it on my phone through ionic view. but still returns [object object]

the goal is the data to be displayed in the alert message.

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {BLE} from '@ionic-native/ble';
import { AlertController } from 'ionic-angular';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  devices: any;

  constructor(public alert: AlertController, public ble: BLE, public navCtrl: NavController) { }

  showResults(){

  let notice = this.alert.create({
  title: 'devices found',
  message: this.devices,
  buttons: ['OK']
  });
  notice.present();
  }

  enable(){

  this.devices = this.ble.scan([],5);
  this.showResults();

  }
  }

any help would be appreciated

Posts: 2

Participants: 2

Read full topic

@roxiecat wrote:

Updated to ionic 3, but may not have done so correctly. When running:
$ ionic g page AssetOneTimeList --verbose

I get the following error, which I can't seem to resolve:

[DEBUG] Loading global plugin @ionic/cli-plugin-proxy
[DEBUG] Loading local plugin @ionic/cli-plugin-cordova
[DEBUG] Loading local plugin @ionic/cli-plugin-ionic-angular
[DEBUG] !!! ERROR ENCOUNTERED !!!
TypeError: AppScripts.processPageRequest is not a function
[DEBUG] TypeError: AppScripts.processPageRequest is not a function
at Object.
(/Users/user/App/node_modules/@ionic/cli-plugin-ionic-angular/dist/generate.js:38:41)
at Generator.next ()
at fulfilled
(/Users/user/App/node_modules/@ionic/cli-plugin-ionic-angular/dist/generate.js:4:58)
at

This is after removing node_modules/, doing an npm install, completely reinstalling node and ionic.
$ ionic info

global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 6.5.0
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : https://registry.npmjs.org/@ionic/app-scripts/-/app-scripts-1.1.4.tgz
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.1.2 ios 4.1.1
Ionic Framework                 : ionic-angular https://registry.npmjs.org/ionic-angular/-/ionic-angular-2.3.0.tgz

System:

Node       : v8.1.3
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
ios-sim    : 5.0.13
npm        : 5.0.3

Package.json:
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "2.4.8",
"@angular/compiler-cli": "2.4.8",
"@angular/core": "2.4.8",
"@angular/forms": "2.4.8",
"@angular/http": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/platform-server": "2.4.8",
"@ionic-native/core": "^3.11.0",
"@ionic-native/splash-screen": "^3.11.0",
"@ionic-native/status-bar": "^3.11.0",
"@ionic/cloud-angular": "^0.11.0",
"@ionic/storage": "2.0.0",
"cordova-plugin-console": "1.0.5",
"cordova-plugin-device": "1.1.4",
"cordova-plugin-splashscreen": "~4.0.1",
"cordova-plugin-statusbar": "2.2.1",
"cordova-plugin-whitelist": "1.3.1",
"cordova-sqlite-storage": "~2.0.2",
"ionic-angular": "2.3.0",
"ionic-plugin-keyboard": "~2.2.1",
"ionicons": "3.0.0",
"moment": "^2.18.1",
"rxjs": "5.0.1",
"sw-toolbox": "3.4.0",
"uuid": "^3.0.1",
"zone.js": "0.7.2"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.4",
"@ionic/cli-plugin-cordova": "1.4.0",
"@ionic/cli-plugin-ionic-angular": "1.3.1",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "FIClock: An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-console": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {},
"cordova-sqlite-storage": {},
"ionic-plugin-keyboard": {}
}
}
}

Any and all help is appreciated!

Posts: 1

Participants: 1

Read full topic

@sedusa wrote:

Hi everyone,

I noticed that when I run $ >ionic serve --lab for one of my projects I get a really cool dark background with a few new additions (screenshot attached). Not sure how I did this. Any idea how I can replicate this?

Thanks.

Screen Shot 2017-07-02 at 11.24.21 PM.png1447x1160 62.8 KB

Posts: 2

Participants: 2

Read full topic

@sahyun1 wrote:

Go to https://ionicframework.com/docs/api/components/datetime/DateTime/
Scroll down to near bottom or search against pickerOptions.
The 'Picker API docs' link is broken

https://ionicframework.com/docs/api/components/picker/Picker

How can I get this fixed?

Posts: 1

Participants: 1

Read full topic

@vinayulphi wrote:

Hi,

I was exploring Ionic Deeplinking.

http://localhost:8100/#/nav/n4/login

My page name is login, but in the URL the /nav/n4 is getting added before the page URL.
I am not able to understand from where is this getting added.

Any help would be appreciated.

Posts: 1

Participants: 1

Read full topic

@SaeedAnsari wrote:

Hi

I am able to get to the FB login section and use the Native plugin. the issue when i am logged in through FB, Facebook shows this error on the FB App

"errorMessage":"Facebook error: Invalid key hash. The key hash {MyKey} does not match any stored key hashes. Configure your app key hashes at https://developers.facebook.com/apps/{MyID}...

i have generated the key using the right method and added it to the FB page. I am not sure where is My App picking this key from and sending to Facebook. The error appears to be coming on the FB App itself.

do you know what i can be doing wrong. is they needed on the IONIC app for FB login to work, if so where should i add it?

lastly i am using an mobile S4 to test the App

Posts: 1

Participants: 1

Read full topic

@rashidi wrote:

I want to set special days for each month in ion-datetime.
for example:

Nov 2-20
Oct 1-15
Dec 1-10

how to set days for each month ?

Posts: 1

Participants: 1

Read full topic

@nikmartin wrote:

I have a page with this code:

import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { NavController } from 'ionic-angular';
import { Events } from 'ionic-angular';

@Component({
  selector: 'page-home',
  animations: [
    trigger('colorChange', [
      state('black', style({ background: 'black' })),
      transition('* => black', animate('100ms')),
      state('red', style({ background: 'red' })),
      transition('* => red', animate('100ms')),
      state('green', style({ background: 'green' })),
      transition('* => green', animate('100ms')),
      state('blue', style({ background: 'blue' })),
      transition('* => blue', animate('100ms')),
      state('yellow', style({ background: 'yellow' })),
      transition('* => yellow', animate('100ms')),
      state('orange', style({ background: 'orange' })),
      transition('* => orange', animate('100ms')),
      state('aqua', style({ background: 'aqua' })),
      transition('* => aqua', animate('100ms')),
      state('white', style({ background: 'white' })),
      transition('* => white', animate('100ms')),
      state('pink', style({ background: 'pink' })),
      transition('* => pink', animate('100ms'))
    ])
  ],
  //templateUrl: 'home.html'
  template: `
  <ion-header>
    <ion-navbar>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Home</ion-title>
    </ion-navbar>
  </ion-header>

  <ion-content padding [@colorChange]="currentColor">
    <button ion-button (click)="doColor(30)">Color Change</button>
  </ion-content>
`
})
export class HomePage {
  private colorCount: number = 0;
  private currentColor: string;
  private intervalID: any;

  colorArr: string[] = ['black', 'red', 'green', 'blue', 'yellow', 'orange', 'aqua', 'pink', 'white'];

  constructor(public navCtrl: NavController, public events: Events) {
    firebase.init();
    events.subscribe('doColorChange', args => {
      this.doColor(args);
    });
  //  events.publish('doColorChange', 30);
  }

  doColor(rate) {
    if (rate) {
      let interval: number = Math.round(1000 / (rate / 60) / 2); // 1000=mssec rate=BPM 60=secs/min /2= on/off per interval
      clearInterval(this.intervalID);
      this.intervalID = setInterval(() => {
        console.log('interval');
        this.changeColor();
      }, interval);
    } else {
      clearInterval(this.intervalID);
      this.currentColor = 'white';
    }
  }

  changeColor() {
    this.colorCount++;
    if (this.colorCount < this.colorArr.length) {
      this.currentColor = this.colorArr[this.colorCount];
    } else {
      this.colorCount = 0;
      this.currentColor = this.colorArr[0];
    }
  }
}

If I uncomment // events.publish('doColorChange', 30); , everything works as written. The page animates when doColor() is called. If doColorChange at line 55 is triggered from a provider module I have, which is initialized in platform.ready(), everything still fires, this.changeColor() is called inside the setInterval,and changeColor() runs, but the animations don't fire.

Posts: 1

Participants: 1

Read full topic

@dhivya_sync wrote:

I want to close and open the menu programmatically on the button click. I have injected MenuController in corresponding .ts file and tried using the below code. Though i get the correct instance of menu control, the open() and close() method gives no effect.

menuClick(event:any){
if((window.innerWidth>=990))
{
if($("ion-split-pane").hasClass("split-pane-visible")){
this.menuCtrl.close();
}
else{
this.menuCtrl.open();
}
}
else
return;
}

Also i tried using toggle() method and menuClose directive but it doesn't work.

Note: menuToggle is working correctly in mobile view. But in web view i want to close and open the menu by clicking on the ion-button. So that i have tried the above code.

Posts: 1

Participants: 1

Read full topic

@Cypher18 wrote:

How to create number scanner?

Posts: 1

Participants: 1

Read full topic

@SaeedAnsari wrote:

Hello

i am able to login to Facebook. I am not sure on what i need to do to be able to get the user email, picture, name, city etc

i am logging into facebook like this

this.fb.login(['public_profile', 'user_friends', 'email'])
      .then((res: FacebookLoginResponse) => {
...
      })
      .catch(e => {
   ...
   });

can you please help me find how to get this data?

Posts: 1

Participants: 1

Read full topic

@dennis-kent wrote:

Hi everyone,

at the moment I have an issue regarding implementing an iFrame into my ionic app. Everything is working if I open the Page, where the iFrame is embeded, on Android. But if I open the page on iOS I get an error in my console which says:

Blocked a frame with origin "http://mywebsite.com" from accessing a frame with origin "file://". The frame requesting has protocol of "http", the frame being accessed has a protocol of "file". Protocols must match.

How can I fix this issue? Do I have to make changes on the Page which I'm trying to embed or do I have to change something within the app?

Best regards and thanks

Posts: 1

Participants: 1

Read full topic

@wildwolf2015 wrote:

hi guys i want show post form in iframe. this is worked in html page but not working in ionic html page

<ion-content padding>
    <form id="form1" target="myIframe" method="post" Action="https://ikc.shaparak.ir/TPayment/Payment/Index">

        <input  name="token" value="{{pasargadModel.clientToken}}" />

        <input  name="merchantId" value="{{pasargadModel.merchantId}}" />

        <input  name="PaymentId" value="{{pasargadModel.PaymentId}}" />

        <button androidButton class="btn btn-primary nexus" type="submit">
            <i class="fa fa-credit-card"></i>
            اتصال به درگاه
        </button>

    </form>

    <iFrame src="" name="myIframe"></iFrame>

</ion-content>

Posts: 1

Participants: 1

Read full topic