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

Tabs+menu app

$
0
0

@indraraj26 wrote:

is anyone who developed an app which uses tabs+menu
suppose an app has 3 tabs and also those tabs will open through the menu.

i did it but somehow while navigate the tabs ionViewDidload of Home page gets call even if you click on About or info page.

Link for More : https://github.com/ionic-team/ionic-v3/issues and also find my repo there

Thank you.

Posts: 1

Participants: 1

Read full topic


Android 4 Status Bar Color ionic 4.5.0

$
0
0

@acqua000 wrote:

Status bar plugin change color work only with * Android 5+ …
How do I change the color of the StatusBar text in the versions before?

i use `$toolbar-md-title-text-color:black

and ` this.platform.ready().then(() {

this.statusBar.overlaysWebView(true);
this.statusBar.styleDefault();
(window as any).StatusBar.styleDefault();
this.statusBar.backgroundColorByHexString(’#fff’);
});`;

Posts: 1

Participants: 1

Read full topic

How to convert json to pojo class

$
0
0

@hg8200 wrote:

How i can convert get/post response json into pojo class

for example i have a json like this

{
"popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc"},
      {"value": "Open", "onclick": "OpenDoc"},
      {"value": "Close", "onclick": "CloseDoc"}
    ]
  }
}

and i have a pojo class Example.ts

declare module Example {

    export interface Menuitem {
        value: string;
        onclick: string;
    }

    export interface Popup {
        menuitem: Menuitem[];
    }

    export interface RootObject {
        popup: Popup;
    }
}

what should i write in success funtion so the above response convert automatically into Example.ts

$.ajax({
               url:'URL',
                      type: "GET",
      success : function(responseText)
      {
    alert(JSON.stringify(responseText));
      },
    error: function(XMLHttpRequest, textStatus, errorThrown)
    {
        alert("Status: " + textStatus);
    }
    });

Posts: 1

Participants: 1

Read full topic

Posting data using http request

$
0
0

@ramashish wrote:

Bellow written is a dynamic form being bult using JSON i want to add a submit button to it.

<ion-item *ngFor="let form of formVal.questions">
    <ion-label stacked >{{form.question}} </ion-label>
        <ion-input *ngIf="form.elementSlug ==='text'" placeholder="{{form.fieldPlaceHolder}}" type="text"></ion-input>
        <ion-input *ngIf="form.elementSlug ==='number'" placeholder="{{form.fieldPlaceHolder}}" type="number"></ion-input>
        <ion-input *ngIf="form.elementSlug ==='email'" placeholder="{{form.fieldPlaceHolder}}" type="email"></ion-input>
        <ion-input *ngIf="form.elementSlug ==='password'" placeholder="{{form.fieldPlaceHolder}}" type="password"></ion-input>
        <ion-textarea *ngIf="form.elementSlug ==='textarea'" placeholder="{{form.fieldPlaceHolder}}" ></ion-textarea>
        <ion-select *ngIf="form.elementSlug === 'radio'">
        <ion-option *ngFor="let option of form.options">{{option.optionLabel}}</ion-option>
      </ion-select>
      <ion-select *ngIf="form.elementSlug === 'checkbox'" multiple="true" >
        <ion-option *ngFor="let option of form.options">{{option.optionLabel}}</ion-option>
      </ion-select>

on submittion the data will again be sent via http request . i am naive plz explain in detail

Posts: 1

Participants: 1

Read full topic

Tab-bar position ionic v4

$
0
0

@niouf4 wrote:

Hi,

I have a problem with ionic version 4.rc-0 and tab-bar position.
Every thing is correctly displayed when you add directly or

But if you want to be dynamic like :
<ion-tab-bar [slot]=“tabplacement”>
(tabplacement is changed in the constructor)
it always display the tab bar at the bottom.

I tested it with the tab starter in ionic cli.

Any idea to correct this ?

Thank you !

Posts: 1

Participants: 1

Read full topic

Swipe to go back override

$
0
0

@HinderiksR wrote:

Hi,

I’ve a page with a custom back button to show a confirmation box if this user is sure they want to go back cause they’ll lose data. However i can still swipe from left to right to go back and i can’t seem to capture this event nor can i disable it on this page alone.

I was wondering if anybody had any idea how to achieve this.

With best regards,
Robin Hinderiks

Posts: 1

Participants: 1

Read full topic

Quesion Ionic 4

$
0
0

@dbarett wrote:

Good Morning,

I am new with regards to the development of ionic and I want to develop a project but I am confused whether to do it in ionic 4 beta or in its version 3, I would like you to recommend which version you should use.

also if using version 3 and update the project to version 4 when it is officially released, it could be done without problems

Thanks

Posts: 1

Participants: 1

Read full topic

Cannot click tab in super-tabs

$
0
0

@tamilm47 wrote:

f i click another tab,the click event is not working.If i debug the control is not came in onTabSelect() method.

Here is my html

  <super-tabs id="super-tabs" tabsPlacement="top" toolbarBackground="secondary" toolbarColor="light" indicatorColor="light" [config]="{ sideMenu: 'both' }" (tabSelect)="onTabSelect($event)">
    <super-tab [root]="page1" title="Description" icon="home" id="descriptionTab"></super-tab>
    <super-tab [root]="page2" title="Example" icon="pin" id="exampleTab"></super-tab>
    <super-tab [root]="page3" title="Editor" icon="heart" id="editorTab"></super-tab>
  </super-tabs>

ts file

import { SuperTabsComponent } from 'ionic2-super-tabs';

/**********************/
page1: any = 'HomaPage';
page2: any = 'NewsPage';
page3: any = 'AboutPage';
/**********************/
@ViewChild(SuperTabsComponent) superTabs: SuperTabsComponent;
/**********************/
/**********************/
onTabSelect(ev:any){
    this.superTabs.slideTo(ev.NewsPage);
}

I have imported SuperTabsModule.forRoot() in app.module.ts also
Note : This is working when I run my app in mobile
Only Not working in run with browser

Thanks in advance.

Posts: 1

Participants: 1

Read full topic


Ionic 3 compile Windows 10

$
0
0

@ezikoh wrote:

Hello

I need compile proyect Ionic 3 to windows 10 desktop but shows the following error and I do not understand what happens. Please someone help me.

Thank you.

cordova build windows
Building project: C:\Ionic_Proyectos\recibowin10\platforms\windows\CordovaApp.Windows10.jsproj

    Configuration : debug
    Platform      : anycpu

The system can not find the path specified.
(node:15392) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: cmd: Command failed with exit code 1
(node:15392) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

ionic info

cli packages: (C:\Ionic_Proyectos\recibowin10\node_modules)
@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 : 2.1.3
Cordova Platforms : windows 5.0.0
Ionic Framework : ionic-angular 3.6.0

System:
Android SDK Tools : 26.1.1
Node : v8.5.0
npm : 5.3.0
OS : Windows 10

Environment Variables:
ANDROID_HOME : C:\Softwares\AndroidSDK

Misc:
backend : pro

cordova requirements
Requirements check results for windows:

Windows OS: installed Windows 10
MSBuild Tools: installed 14.0
Visual Studio: installed 14.0
Windows SDK: installed 10.0
Windows Phone SDK: installed 10.0

cordova platform ls
Installed platforms:
windows 5.0.0
Available platforms:
android ~7.0.0
browser ~5.0.1
ios ~4.5.4
osx ~4.0.1
www ^3.12.0

Posts: 1

Participants: 1

Read full topic

To make Use of External Camera

$
0
0

@anupkool wrote:

Make use of External Camera in order to have it set up inside the application.
We are using an external mounted camera and want to integrate it inside the app.

Posts: 1

Participants: 1

Read full topic

How to build iOS app with 12.1 SDK in ionic appflow

New Project fail

$
0
0

@Motero69 wrote:

Hello

Recently for some errors that show me in project I decide star a new project from scratch,

After creating the project with ionic start myApp tabs --type = angular (I have created it in two diferents computers and the same thing happens to me)
I get a message that there is a high severity vulnerability, I execute the command suggested by npm audit fix, but it does not fix it and says to do it manually, the problem is with some webpack-dev-server. Should I worry? How do I fix it?

The second question is: When I get these Warnings, when I’m installing a native Api, what should I do? It says that it requires certain libraries. Should I install them? How do I install them?

Thanks for advance

Posts: 1

Participants: 1

Read full topic

[ionic4] Property 'globalization' does not exist on type 'Navigator'

$
0
0

@rodrigojrmartinez wrote:

Hi there. I’m having some trouble to use the ECMAScript Internationalization API.

Initially on my project I’ve used the Globalization API from ionic, cordova which worked fine. While trying to lint my project I’ve got the following error

WARNING: […]: Globalization is deprecated: With the ECMA Internationalization API now supported on iOS, Android and Windows devices, this plugin is not required any more.
Migrating from this plugin to the ECMA Internationalization API is explained in this Cordova blog post.

I’ve read the migration post, which seems rather simple. By just using the navigator which is a global variable then you can make use of the globalization functions, such as the getPreferredLanguage function which I’m interested on for initializing the language based on the device (mobile or browser) locale. There doesn’t seem to be any extra configuration.

But then while trying to compile I’m getting

error TS2339: Property ‘globalization’ does not exist on type ‘Navigator’.

This seems rather strange to me, I’ve installed the “cordova-plugin-globalization” plugin on my package.json, also on my config.xml file and then both my andorid.json and browser.json files in the plugins folder. Yet this isn’t detected. I’ve tried to overpass this error while compiling by doing something like

let nav: any = (navigator as any);
if (nav.globalization) {
    nav.globalization.getPreferredLanguage(
         (res) => {
                console.log('globalization lang ', res);
          },
          (error) => {
                console.error('error ');
          }
    );
} else {
     console.log('no globalization');
}

but this always evals to ‘no globalization’. Does someone stumbled with this problem or knows a possible solution?

Posts: 1

Participants: 1

Read full topic

Prevent change ion-toggle before confirmation

$
0
0

@sadalsuud wrote:

Hi people I have an ion-toggle:

 <ion-toggle (ionChange)="updateAviableStatus($event)" [checked]="_driver.data.driver.aviable"></ion-toggle>

When I try clickit it changes without wait the option of confirm alert
How can prevent ion-change change and do it by myself into a method

Any idea … ? thanks for time

Posts: 2

Participants: 2

Read full topic

Convert to pdf


Background geolocation! Not working correctly

$
0
0

@Saenz wrote:

Good morning people and good year, I am with a problem that I have been carrying for weeks and he looked for many solutions for all Google and none works for me, since I ask you to forgive me for my bad English! I tell them maybe someone can help me:

I am in a phone tracking system that works perfectly with ionic 3.9.2 and observe the follow-up with the angular angle in the latitude and longitude of the data that the application sends a firebase, until then everything is great. But I have a small problem when it comes to the application work in the background, I have installed background mode, background geolocation and powermanagement and this happens to me:
Lock the phone with the lock button and send the coordinates a firebase for no more than 2 min.
If I refer to a middle button that is in the background, it directly stops me from passing the coordinates.
What I need is to be able to use the phone normally and the application.

I hope you have explained me well!
Thanks and I hope someone has already gone through this and you can help me!
Thanks again !!

Scripts:

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { IonicStorageModule } from '@ionic/storage';


import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { UsuarioProvider } from '../providers/usuario/usuario';

import { AgmCoreModule } from '@agm/core';

// Plugins
import { BackgroundGeolocation, } from '@ionic-native/background-geolocation';
import { Geolocation } from '@ionic-native/geolocation';


// Firebase
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { firebaseConfig } from '../config/firebase.config';
import { UbicacionProvider } from '../providers/ubicacion/ubicacion';
import { BackgroundMode } from '@ionic-native/background-mode';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFirestoreModule,
    IonicStorageModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyA-HXVa2jtkGfKtIJwisxgC46RaWqC1xuI'
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    UsuarioProvider,
    UbicacionProvider,
    Geolocation,
    BackgroundMode,
    BackgroundGeolocation
  ]
})
export class AppModule {}

App.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { BackgroundGeolocation } from '@ionic-native/background-geolocation';
import { Geolocation } from '@ionic-native/geolocation';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { UsuarioProvider } from '../providers/usuario/usuario';
import { BackgroundMode } from '@ionic-native/background-mode';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage:any;

  constructor(platform: Platform, 
              statusBar: StatusBar, 
              splashScreen: SplashScreen,
              public _usuarioProv: UsuarioProvider,
              private backgroundMode: BackgroundMode,
              private backgroundGeolocation: BackgroundGeolocation) {
    platform.ready().then(() => {
      
      _usuarioProv.cargarStorage().then( existe => {
        
        statusBar.styleDefault();
        splashScreen.hide();

        if ( existe ) {
          this.backgroundMode.enable();
          this.backgroundGeolocation.start();
          this.rootPage = HomePage;
        }else {
          this.rootPage = LoginPage;
        }

      });

    });
  }
}

Provider - ubicacion.ts

import { Injectable } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation';

import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';
import { UsuarioProvider } from '../usuario/usuario';
import { Subscription } from 'rxjs/Subscription';
import { BackgroundGeolocation } from '@ionic-native/background-geolocation';

@Injectable()
export class UbicacionProvider {

  taxista: AngularFirestoreDocument<any>;
  private watch: Subscription;


  constructor( private afDB: AngularFirestore,
               private geolocation: Geolocation,
               public _usuarioProv: UsuarioProvider,
               public backgroundGeolocation: BackgroundGeolocation) {
    
    // this.taxista = afDB.doc(`/usuarios/${ _usuarioProv.clave }`);

  }

  inicializarTaxista(){
    this.taxista = this.afDB.doc(`/usuarios/${ this._usuarioProv.clave }`);
  }


  iniciarGeoLocalizacion() {
    let config = {
      desiredAccuracy: 0,
      stationaryRadius: 20,
      distanceFilter: 10,
      debug: true,
      interval: 2000
    };

    
    this.geolocation.getCurrentPosition().then((resp) => {
      // resp.coords.latitude
      // resp.coords.longitude

      this.taxista.update({
        lat: resp.coords.latitude,
        lng: resp.coords.longitude,
        clave: this._usuarioProv.clave    
      });

      this.watch = this.geolocation.watchPosition()
              .subscribe((data) => {
                  // data can be a set of coordinates, or an error (if an error occurred).
                  // data.coords.latitude
                  // data.coords.longitude
                  this.taxista.update({
                    lat: data.coords.latitude,
                    lng: data.coords.longitude,                  
                    clave: this._usuarioProv.clave
                  });
                  this.backgroundGeolocation.start();

          console.log( this.taxista );

      });



     }).catch((error) => {
       console.log('Error getting location', error);
     });

  }

  detenerUbicacion() {

    try {
      this.watch.unsubscribe();
    }catch(e){
      console.log(JSON.stringify(e));
    }


  }

}

Help Please!
Thanks!

Posts: 1

Participants: 1

Read full topic

Sample Ionic 4 and ReactiveForm Validation

$
0
0

@jandry wrote:

Hi,
I have tryed to found a working sampling of Ionic 4 with reactive form validation (or form validation any way), but all sample I find are for ionic 3 and they all seems not working.
I’m wokring with the actual last version of ionic project template created from cli
I’m certainly missing something but has somebody a working sample or tutorial link please ?

Most of the time, the error is on [formGroup] property in form tag and formControlName on ion-input that are not known

I’ve tried many like:



Posts: 1

Participants: 1

Read full topic

Cannot find name 'angular' - error on Cordova plugin

$
0
0

@KioMio wrote:

I get “Cannot find name ‘angular’” when I add this code:

let app = angular.module(‘MyApp’, [‘ngCordova.plugins.zeep’]);
app.controller(‘MyController’, function($scope, $cordovaZeep) { …

It is from “cordova-plugin-zeep-ionic3” at

How do I declare an object named “angular”?

Posts: 1

Participants: 1

Read full topic

Blood pressure monitoring

$
0
0

@vijayp006 wrote:

hello, how can I measurement blood pressure monitoring wia ionic 4 BLE.
i have done read data and write data but how to real data received on this write data. i have get " ok " string on write data.but i want to real data like as total number of blood pressure count,high blood pressure,low blood pressure etc.please give me any ideas

Posts: 1

Participants: 1

Read full topic

Typescript error on ionic run android --aot

$
0
0

@kimjosh187 wrote:

[14:56:36] ionic-app-scripts 3.1.10
[14:56:36] build dev started …
[14:56:36] clean started …
[14:56:37] clean finished in 442 ms
[14:56:37] copy started …
[14:56:38] deeplinks started …
[14:56:39] deeplinks finished in 337 ms
[14:56:39] ngc started …
[14:57:12] typescript error
Type ParallaxHeaderDirective in C:/silentlabors/src/directives/parallax-header/parallax-header.ts is part of
the declarations of 2 modules: AppModule in C:/silentlabors/src/app/app.module.ts and DirectivesModule in
C:/silentlabors/src/directives/directives.module.ts! Please consider moving ParallaxHeaderDirective in
C:/silentlabors/src/directives/parallax-header/parallax-header.ts to a higher module that imports AppModule
in C:/silentlabors/src/app/app.module.ts and DirectivesModule in
C:/silentlabors/src/directives/directives.module.ts. You can also create a new NgModule that exports and
includes ParallaxHeaderDirective in C:/silentlabors/src/directives/parallax-header/parallax-header.ts then
import that NgModule in AppModule in C:/silentlabors/src/app/app.module.ts and DirectivesModule in
C:/silentlabors/src/directives/directives.module.ts.

[14:57:12] ionic-app-script task: “build”
[14:57:12] Error: The Angular AoT build failed. See the issues above
Error: The Angular AoT build failed. See the issues above
at C:\silentlabors\node_modules@ionic\app-scripts\dist\aot\aot-compiler.js:237:55
at step (C:\silentlabors\node_modules@ionic\app-scripts\dist\aot\aot-compiler.js:32:23)
at Object.next (C:\silentlabors\node_modules@ionic\app-scripts\dist\aot\aot-compiler.js:13:53)
at fulfilled (C:\silentlabors\node_modules@ionic\app-scripts\dist\aot\aot-compiler.js:4:58)
[ERROR] An error occurred while running subprocess ionic-app-scripts.

    ionic-app-scripts build --aot --target cordova --platform android exited with exit code 1.

ParallaxHeaderDirective seems to be the problem. But don’t have any idea how to fix it…

Posts: 1

Participants: 1

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>