@max wrote:

Hi all,

This is a placeholder thread for the upcoming release of the Ionic DevApp, a rapid local device testing app that makes it easy to test on iOS and Android without installing any Native SDKs or even Cordova.

Once the app is released, we will aggregate feedback and issues in this thread as we work through the first release.

Stay tuned.

Posts: 1

Participants: 1

Read full topic

@rajeevriitm wrote:

I am working on an Ionic 3 app. It has tinder style cards which can be swiped. When all the cards are over it shows load more button.

  reviewHunt(status: string){
    this.anim[0]= status;
    setTimeout( () => {
      this.anim[0]= undefined  ;
      let hunt;
      hunt = this.hunts.shift();
    })
  },300)

I need the setTimeOut function to remove the card (hunt in the function ) for waiting till an animation finishes. This works well browser. But when I run on my phone it doesnt work well on startup.

When all the hunts are finished it should show load more button. But it doesnt on my phone. It shows the button if i trigger change detection by tapping somewhere.

  <div   class="load-more" *ngIf="hunts.length == 0">
      <div class="load-text" *ngIf="!loading">
        No more hunts.
      </div>
  </div>

The load more div doesnt appear when hunts.length == 0. Why is this happening. And it happens only on the first time I launch the app.

Posts: 1

Participants: 1

Read full topic

@_Ali94 wrote:

Hi every body

Soon I will work on notifications and I want to know few things about the basics of ionic notifications

First: Let me assume that I want to make a notif. that alert me at 7:00 PM. So my questions are:

• How the application will show the notif. when my app closed. Is that happens because the app works in background or there is some thing like chacking functions ?

• let me assume I decide to change the time to 7:30. So is there some think like key for the notification that used to edit the old notif. ?

Second: of course my app works with firebase, so any changes in the data that will changes the data from all device.

• So, let assume I changed the time of notif. to 7:30 with other phone, then is the old notif. of the old phone will be changed ?

• let me assume I want to send notif to spacific users, so how the system of notif will be works. Is the system work on IDs of users, or how the app check the external notif. And know this is a public notif. Or private ?

I have a lot of confusing things about ionic notif but let me know the most important answers of these questions, then I think I will be fine for the other cases

Posts: 1

Participants: 1

Read full topic

@hectorcrispens wrote:

hello, i am hector from argentina. i am programming in ionic but the plugin imageResizer not work.
this is the code of home.ts where is implemented the resizer.

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { FileChooser } from ‘@ionic-native/file-chooser’;
import { FilePath } from ‘@ionic-native/file-path’;
import { Crop } from ‘@ionic-native/crop’;
import { ImageResizer, ImageResizerOptions } from ‘@ionic-native/image-resizer’;
import { File } from ‘@ionic-native/file’;
import { Base64 } from ‘@ionic-native/base64’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
imagencut: any;
image:string=’’;
imageSP:string=’’;
imagenPath:string=’’;
imageBase64:string=’’;

options: any = {
uri: this.imagencut,
quality: 90,
width: 100,
height: 100
} as ImageResizerOptions;

constructor(public navCtrl: NavController, private fileChooser: FileChooser, private filePath: FilePath,
private crop: Crop, private imageResizer: ImageResizer, private file: File, private base64: Base64) {

}
choose() {

this.fileChooser.open()
  .then(uri => this.imageSP = uri)
  .catch(e => console.log(e));

setTimeout(this.filePath.resolveNativePath(this.imageSP)
.then(filePath => this.imagenPath = filePath)
.catch(err => console.log(err)),6000);
}

mostrar(){
alert("imagenSP: " + this.imageSP);
alert("imagenpath: " + this.imagenPath);
alert("image: " + this.image);
// alert("imagebase64: " + this.imageBase64);

}

cortar(){
this.crop.crop(this.imagenPath, {quality: 15})
.then(
newImage => this.imagencut = newImage),
error => console.error(‘Error cropping image’, error)
alert(“la nueva imagen:” + this.image);
this.image = this.imagencut;
}
original(){
this.image = this.imagenPath;
}
base(){
this.base64.encodeFile(this.imagencut).then((base64File: string) => {
this.imageBase64 = base64File;
}, (err) => {
alert(err);
});
alert(“termino al fin”);
}
resize(){
this.imageResizer
.resize(this.options)
.then(filePath => this.image = filePath)
.catch(e => alert(e));
}
}

the function resize is calls from a button from home.html before of choose an image from the gallery

Posts: 1

Participants: 1

Read full topic

@DevorrahTester wrote:

If an Ionic 3 app is essentially transpiled code, is it possible that my Firebase credentials can be found and used to insert/create bad data?

Posts: 1

Participants: 1

Read full topic

@nathantaal wrote:

Hello everyone,

I want to make an application like Google clock, and then especially the stopwatch part. Like it needs to continue in background and when app closes create an notification where you can stop and pause the time etc. I will figure that all out, but I don’t know how to start. I can only find countdown counters, but I need to count down. Who can tell me where I need to start to get this app working?

Thanks in advance,

With kind regards,

Nathan

Posts: 1

Participants: 1

Read full topic

@abpatola wrote:

Hi, I am new to Ionic/Angular as a framework in general and want to try and learn how to display markers on a map from a JSON file. I have followed an online tutorial to load a Google Maps API on my Ionic platform. So at the moment I only have a map loading with one marker. If anyone can help inform me how I should go about achieving my goal it would be greatly appreciated.

the JSON feed (it’s long): http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500

My map functionality currently to display map with marker:

home.html:

<ion-content>
 <div #map id="map"></div>
<p>

</p>
</ion-content>

home.ts:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var google: any;

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

 @ViewChild('map') mapRef: ElementRef;

constructor(public navCtrl: NavController) {

}

ionViewDidLoad(){
 this.showMap();

}

showMap(){

 //location - lat long
 const location = new google.maps.LatLng(51.507351, -0.127758);

  const options ={
  center: location,
  zoom: 10

   }

   const map = new google.maps.Map(this.mapRef.nativeElement, options);

   this.addMarker(location, map);
 }


addMarker(position, map) {

return new google.maps.Marker({
  position,
  map
});
}
}

Posts: 1

Participants: 1

Read full topic

@Just4Fun00 wrote:

I have a few apps that have been published in the Apple Store. They are esoteric and not big money makers. I keep them going for fun and for the community they serve.

My issue is that Jquery Mobile is no longer actively supported and these apps were created using JQM. They are slow and becoming tough to maintain. I am not a great coder. In fact, I’m pretty bad. I like the design end of things much more. I can use a little javascript. For someone like me, JQM made some things so easy. I’ve looked at lot of frameworks. I’ve tried using ionic, but it seems to depend on Angular.js. I have little knowledge of angular. I don’t want to spend a year trying to learn Angular.js in order to update my little apps.

Does ionic support javascript/jquery? ionic seems to be the only framework that has a built in list search. I need one for my apps, but in order to port them to ionic, I also need to be able to include a little javascript.

Thanks for you help.

-Rachel

Posts: 1

Participants: 1

Read full topic

@Mata8 wrote:

Hello,

I am having trouble getting the super template working in Visual Studio. After importing the project to VS and building, I constantly get error ‘DEP10402: Could not locate the start page. You may need to build your project.’

Any idea how I can resolve this? Starting an ionic project with one of the 3 templates (blank, side menu, tabs) in VS works fine, but I would really like to start with the super template.

Thanks!

Posts: 1

Participants: 1

Read full topic

@abpatola wrote:

Hi guys, I am trying to display markers form a JSON file and am encountering this error right now:

Screen Shot 2017-10-24 at 8.18.58 PM.png1116x1132 180 KB

The map loads fine though and I can see my parsed array of objects in the developer window.

If someone can suggest how I can properly get the coords from the array so the markers will display that would be wonderful.

Here is the JSON: http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500

It seems as though its within calEvents.locations.coords yet I am unsure how to parse this in the function.

here is my home.ts marker functionality:

displayGoogleMap(){
let latLng = new google.maps.LatLng(43.653908,-79.384293);
let mapOptions = {
center:latLng,
zoom:12,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
}


getMarkers(){
//this.http.get('assets/data/markers.json').map((res)=>res.json()).subscribe(data=>{
this.http.get('http://app.toronto.ca/cc_sr_v1_app/data/edc_eventcal_APR?limit=500').map((res)=>res.json()).subscribe(data=>{
this.addMarkersMap(data);

});
}

addMarkersMap(markers){
for(let marker of markers){
  var loc = {lat: marker.latitude , lng: marker.longitude};

  console.log(loc);
  marker = new google.maps.Marker({
  position: loc,
  map: this.map,
  title:marker.name,
  label:marker.content

});

}
}

Any help is appreciated. Thanks!

Posts: 2

Participants: 2

Read full topic

@vazad wrote:

I did a blunder and clicked undo all changes in VSCODE. I have the prod build before i did this. The step undid days worth of work. I wonder if I can get code back from the build folder. Thanks.

Posts: 1

Participants: 1

Read full topic

@vikceo wrote:

I am building a desktop website using ionic 3 and angular.

My tabs are created dynamically and i need an option to be able to close (destroy) the tab. The question is how do i put a close icon in the tab header to call any action?

tabIcon does not seems to have a way to invoke a method etc. Please advise

Posts: 8

Participants: 2

Read full topic

@vikceo wrote:

I have a tabs component with one static tab and few generated on the fly. It looks like below

 <ion-tabs #myTabs tabsPlacement="top" tabsLayout="icon-end" style="min-height: 500px;margin-left:14px;" no-border selectedIndex="{{core.activeTabIndex}}">
                <ion-tab [root]="optyList" tabTitle="Opportunities"></ion-tab>
                <ion-tab *ngFor="let tb of core.dynamicTabs" [root]="tb.pageName" tabTitle="{{tb.tabTitle}}" tabIcon="close" (ionSelect)="onTabActive($event)"></ion-tab>
          </ion-tabs>

i am trying to switch to the newly created tabs like:

  this.events.subscribe('switch-tab',
                    (val) => this.tabs.select(val)
                )

but nothing happens. i have cofirmed i am geting the val every time a new tab is created.

Posts: 9

Participants: 2

Read full topic

@Ressa_Panda wrote:

Hello,
currently i am learning ionic2 to develop a simple android app which can store data locally using sqlite.

I followed some tutorials and i keep getting error on this line of code which is:

home.ts

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { SQLite } from ‘ionic-native’; ->> Cannot find module ‘ionic-native’
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

constructor(public navCtrl: NavController) {

}

}

Can some one point out where is my mistake?
I have executed following commands after this project has been created:

1. cordova platform add android
2. ionic cordova plugin add cordova-sqlite-storage

Thanks…

Posts: 1

Participants: 1

Read full topic

@matyas wrote:

I have the following use case:
I have both a sidebar and a navbar in my ionic application.

in my page components I can easily access and edit the navbar like this:

<ion-header>
  <ion-navbar color="my-color-defined-in-variables.css" no-border-bottom>
  <ion-navbar>
</ion-header>

every page has its own template that can overwrite color of this navbar easily simply by changing the ion-navbar color attribute in the template of the page.
This works perfectly fine.
My problem is that my project also uses a sidebar which is defined in app.template.html (therefore it is outside of the scope of the page’s template):

  <ion-menu>
        <ion-header>
            <ion-toolbar id="mainLeftToolBar" color="i-can-set-this-color-also-with-an-initial-scss-variable-but-i-want-to-change-it-afterwards" >
                <ion-title>Menu</ion-title>
            </ion-toolbar>
        </ion-header>
  </ion-menu>

Now when I change the navbar color in my page components only the top navbar changes (which is in the scope of the component) but the sidebar stays the same (because it is defined in app.template.html).
How can I also change the sidebar color from within my page components?
I tried the following:

@Component({
  selector: 'test',
  templateUrl: testhtml'
})
export class SomePage {


  private _elem: HTMLElement;

  @ViewChild('mainLeftToolBar') sideBarHeader: ElementRef;
  constructor(
    public eref: ElementRef
  )
  {
     this._elem = eref.nativeElement;
  }


  ionViewDidLoad() {
    let sideBarHeader = this.sideBarHeader.nativeElement;
    console.log('page loaded this is my sidebar: ', sideBarHeader);
  }
}

But the sideBarHeader variable is undefined, and I assume that is because I am using @ViewChild incorrectly.
My question is:
How can I change the sidebar color dynamically from within my page component?
How can I access and manipulate the sidebar dom element from within my page component?

I hope the question is clear, thank you everybody in advance for your time and help!

Posts: 1

Participants: 1

Read full topic

@padmaraj wrote:

In my app I need to watch for OTP message. So I should be able to start and stop watch, say after a minute. I could find “cordova-plugin-sms” and “cordova-plugin-sms-receiver”, both seem to be dead projects. Ionic Native documentation only has SMS send listed. Can someone please suggest what is best plugin to use.

Posts: 1

Participants: 1

Read full topic

@cisocybersecurity wrote:

I am using following code for going from one page to another but sometime I will see the elements of earlier pages into current page.I also remove page from the stack.

this.navCtrl.push(SecondPage, {
                          key: this.key
                    }).then(() => {
                        const index = this.viewCtrl.index;
                        for (let i = index; i >= 0; i--) {
                            this.navCtrl.remove(i);
                        }
                    });

Posts: 1

Participants: 1

Read full topic

@vikceo wrote:

I am using ionic 3 angular and building a web application. One of the requirement i am having is a tabs component with first tab showing a list. clicking each of list item creates a new tab and shows some contents.

The way I implemented it is:

     <ion-tabs #myTabs tabsPlacement="top" tabsLayout="icon-end">
                    <ion-tab *ngFor="let tb of core.dynamicTabs" [root]="tb.pageName" tabTitle="{{tb.tabTitle}}" tabIcon="close" (ionSelect)="onTabActive($event)"></ion-tab>
              </ion-tabs>

I am keeping a shared array to store tab related data like

 @Injectable()
    export class CoreStructureProvider {
        dynamicTabs:any[];

      constructor(public http: Http) {
        this.dynamicTabs = [ { "pageName": MyListPage, "tabTitle" : rw.name, "optyId": rw.OptyId }];
      }

So from the first tab’s page the code to create new tabs is:

     createTab(rw){
                 this.core.dynamicTabs.push( { "pageName": EditOptyPage, "tabTitle" : rw.name, "optyId": rw.OptyId });
    (this.navCtrl.parent).select(1)

           }

Everything works great except the tab selection. Just to simplify the problem i hardcode value to 1. So ideally everytime createTab is called the 2nd tab should be selected.

But here is the behavior that i am seeing:
when you come first time: there is just one tab showing the list. you click one of the items on the list and a new tab gets created. however that does not become the active tab.

now click one more time on any other link in the list and this time and from now onwards the 2nd tab becomes active.

So I am not sure why first time this does not trigger?

Posts: 1

Participants: 1

Read full topic

@reedrichards wrote:

With the introduction of lazy loading, it’s now possible to split the javascript code in different bundles (main.js / 0.js / 1.js / etc.)

Is there a way to do the same with css?

I would like to have kind of a common.css which contains everything shared by all pages and components and then having one.css for each of them

My actual css is around 700kb, I guess that splitting it would reduce the size of the css to load and therefore speed up a bit my boot time

P.S.:

On the forum I found this question but it remains unanswered How can i lazy load css file or split main.css to load?

On the app-script GitHub I found this old issue but not sure if it’s still the way to follow https://github.com/ionic-team/ionic-app-scripts/issues/432

Posts: 2

Participants: 2

Read full topic

@Nb_I wrote:

Hello, I am new to Ionic and PouchDB, and, currently having issues with PouchDB where I am unable to call the same database whenever the app close. I am suspecting my database is still there but cannot be accessed because from the Android device that I use to test, local storage and cache does not gets cleared when the app closes. But everytime I open the app, there will be no data displayed, and I need to re-enter all of test information again.
I have researched on the topic and cannot find much aside from pouchdb-data-gets-deleted-after-app-quits issue.

The way I open my database is simply using;

var db = new PouchDB('testDB');

Below is my ionic info;

cli packages: (/home/pc/test_app/node_modules)
    @ionic/cli-utils  : 1.15.0
    ionic (Ionic CLI) : 3.15.0

global packages:
    cordova (Cordova CLI) : 7.0.1

local packages:
    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3 browser 4.1.0
    Ionic Framework    : ionic-angular 3.5.0

System:
    Android SDK Tools : 26.1.1
    Node              : v8.1.2
    npm               : 5.4.2
    OS                : Linux 4.10

Environment Variables:
    ANDROID_HOME : /home/pc/Android_Studio/SDK

Misc:
    backend : pro

here is my package.json

        "pouchdb": "^6.3.4",
        "pouchdb-adapter-cordova-sqlite": "^2.0.2",
        "pouchdb-adapter-localstorage": "^6.3.4",
        "pouchdb-adapter-utils": "^6.3.4",
        "pouchdb-adapter-websql-core": "^6.2.0",
        "pouchdb-binary-utils": "^6.3.4",
        "pouchdb-browser": "^6.2.0",
        "pouchdb-collections": "^6.3.4",
        "pouchdb-core": "^6.2.0",
        "pouchdb-errors": "^6.3.4",
        "pouchdb-json": "^6.3.4",
        "pouchdb-merge": "^6.3.4",
        "pouchdb-promise": "^6.3.4",
        "pouchdb-utils": "^6.3.4",

Posts: 1

Participants: 1

Read full topic