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

Ionic 4 navCtrl problem

$
0
0

@joel619 wrote:

When the user opens the app first time, go to login, after login navigate to dashboard, but when the back button is pressed it show login again. Can’t find a way to remove this page after login.

Another thing is that placing an if condition on app.component.ts to show login if not logged in, shows the dashboard for a second and then the login page. If I make the login page the default page, when the user is in dashboard and hits back button it show login again.

Posts: 1

Participants: 1

Read full topic


how to use primeNG with ionic 3?

$
0
0

@Lucas098 wrote:

how to use primeNG with ionic 3?

I followed in the footsteps of the primeNG documentation, but it did not work.

Posts: 1

Participants: 1

Read full topic

Ionic 3 Keyboard type and buttons

$
0
0

@ugrdursun wrote:

Hi,

I need to use different keyboard types on different inputs and also back, forward and OK button. This is exactly what i want;

GIF-2019-01-30-23-11-44

I searched for topics but couldnt find any related. Thanks for your support…

Posts: 1

Participants: 1

Read full topic

Ion Button custom colors

$
0
0

@matthiasunt wrote:

I’m trying to set dynamic colors for the background-color and color of an ion-button.
What I’ve achieved so far:
20

My problem: The button color overlays the button outline.
Is this an Ionic issue, how can I get around this?

My code:

Template:

<ion-button *ngFor="let d of districts" shape="round"
                (click)="districtClicked(d)"
                [ngStyle]="getDistrictStyle(d)"
                color="{{getDistrictColors(d)[0]}}">
        {{getDistrictName(d)}}
</ion-button>

Method in my Component:

getDistrictStyle(district: District) {
        if (district) {
            const colors = this.colorGenerator.getDistrictColors(district);
            return {
                'background-color': colors[0],
                'color': colors[1]
            };
        }
 }

getDistrictColors(district: District) simply returns an array with two colors in hex (red and white in this case).

Posts: 1

Participants: 1

Read full topic

Tab to return to root of page

$
0
0

@obinnae wrote:

Hello, my app has 4 tabs. Tab1 has a list, and tapping any item in the list will go to a detail page within the tab. If I press tab2, then press tab1 again, tab1 still shows the details page instead of the list page. If I press tab1 again, it then shows the list.
How can I set the tabs to always return to their original content (tab1 to return to list)?

Thanks.

Posts: 1

Participants: 1

Read full topic

Ionic 4.0.0 can't change the DIR dynamically as before with platfrom.sitDir('rtl') in ionic 3

$
0
0

@HeshamShawky wrote:

With Ionic v4.0.0 I can’t change the direction from LTR to RTL by using platform.sitDir('rtl') as before in ionic 3!!

I have searched a lot and didn’t find a replacement for platform.sitDir('rtl') from ionic 4 docs!! or even instructions for RTL support!

I actually have done something with the following code document.documentElement.setAttribute('dir', 'rtl') as an experiment it works but with a lot of issues too like the sidemenu position still on the left side not on the right! as it should.

I’m building a multi-language app ( English, Arabic ) so this a real pain for me!

Posts: 1

Participants: 1

Read full topic

Background Geolocation isn't a Observable

$
0
0

@dudu1096 wrote:

I need Implement a Background Geolocation in my app. I acess this ionic documentation, there shows the code below:

this.backgroundGeolocation.configure(config)
  .subscribe((location: BackgroundGeolocationResponse) => {

    console.log(location);

    // IMPORTANT:  You must execute the finish method here to inform the native plugin that you're finished,
    // and the background-task may be completed.  You must do this regardless if your HTTP request is successful or not.
    // IF YOU DON'T, ios will CRASH YOUR APP for spending too much time in the background.
    this.backgroundGeolocation.finish(); // FOR IOS ONLY

  });

When I used this code in my app, my ts-lint accuse the configure(config) method is a Promise<any> and not a Observable, so, I cant use subscribe. I switched subscribe for then. But when I run, shows this error below:

ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at BackgroundGeolocation.configure (vendor.js:82333)
// error below ommited

Someone can help me?

Posts: 1

Participants: 1

Read full topic

Ionic 4: How to change font size?

$
0
0

@i2x wrote:

Howdy -

I’m starting a new Ionic v4 app and the customer has asked for the font-size to be larger. Seems like a reasonable request.

I see documentation on Ionic CSS variables, including colors and --ion-font-family. However, I see no obvious way to customize font size.

What’s the recommended approach?

Thanks for the help,
Ben

Posts: 1

Participants: 1

Read full topic


IONIC bluetooth communication

$
0
0

@Eduardoqmb wrote:

Hello, I’m new using Ionic framework.

I’m trying to communicate one bluetooth connect to an Arduino with my app.
I have a button on my app that when pressed allowed the Arduino to start sending serial data.

ARDUINO

void loop()  
{
  if (bluetooth.available()>0) { 
    
    b1 = bluetooth.read(); 
    command += b1; 
    Serial.print(command);
    delay(100); 
    if (b1 == 'a'){ //Verifying if its allowed to send data
      dados = bluetooth.write("180,190,30,50,20,15,35"); //Data
      Serial.print(dados);
  }

But when the app receive this data I have two problems

First:
I’m trying to reach all char array and separate my numbers, but every time I do that I received nothing in my toast message.

Second:
If I remove the while, the first time I read a message I received in my toast message and undefined.

IONIC

comBluetooth() {

    var char: any;
    var i: number = 0;
    var o: number = 0;
    var parada: any = ",";
    var dados: number[];
    var convert: any = "";
    var tamanho: number;

    this.bluetoothSerial.write('a');

    this.bluetoothSerial.readUntil('n')
    .then((dadoRecebido: any) => {
      char = String(dadoRecebido);
      
      tamanho = char.length;
      
      while(i < tamanho){
        if(char[i].localCompare(",") == 0){
          dados[o] = parseFloat(convert);
          o = o + 1;
        }else{
          convert = convert + char[i];
          i = i + 1;      
        }
      }
      this.toast.create({ message: char, duration: 3000, position: 'botton' }).present();
      this.bluetoothSerial.clear();
    });
 }

Could anyone help me with the correctly way to do this communication? As I said I’m new in ionic framework so any detailed information will helps a lot.

Thanks

Posts: 2

Participants: 1

Read full topic

Question with bypassSecurityTrustHtml(String: value)

$
0
0

@min2kor wrote:

this is my code

“<div [innerHTML]=“prodContent”>”

and

“this.prodContent = this.domSanitizer.bypassSecurityTrustHtml(this.product.content);”

in prodContent , it has html code.
for example,
“<p>text Showing</p><mg src=”//google.com/img/text*.jpg"><p>this is image.</p>"

when i am checking ionic on Chrome (localhosting).
Image shows well .

however, image is not showing on App.
i think “//” is not support “http://”.

how can i show image on App ?
please help me.

thanks.

Posts: 1

Participants: 1

Read full topic

Ionic cli new project Freezes up

$
0
0

@scubasteve7 wrote:

I am trying to start a new project in the ionic framework with the following command

ionic start MyFirstIonic blank

However, no matter what I try the command prompt just sits there and blinks and eventually goes unresponsive. I had downloaded everything I needed to run an application about a month ago and everything seemed to work just fine. However, now when I try to create a new project it just freezes

I have a school project I am needing to get done and this is really stressing me out. I have tried the following solutions but to no avail.
-Cleaning the cache
-uninstalling and reinstalling ionic and cordova
-uninstalling/ reinstalling node
-installing an earlier version of node (V8.11)

  • Going to my app roaming and deleting npm and npm cache

None of these proposed solutions i found online seem to work

If anyone has any ideas on how to get my programming environment up and running I would greatly appreciate it! I am already running behind on my assignments and really do not wish to fall even further behind.

Here is a screenshot of what’s going on.

Posts: 1

Participants: 1

Read full topic

How Reinstall Ionic Version 3 with Correctly

$
0
0

@anitatmj wrote:

Hai I have some problem with my ionic so was uninstalled it and now how to reinstall it with Correctly…

I want like this again :
ionic (Ionic CLI) : 4.5.0
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)

Thanks

Posts: 1

Participants: 1

Read full topic

Lookup table, efficient approach?

$
0
0

@AJBarry wrote:

Hi all!

The TL;DR is I need to translate or map some numeric data to a readable string using lookup tables stored on Firebase.

I have a functional Ionic V3 app which integrates firebase.

I have some data that is being stored and accessed in this format:

Message in Raw Format:
   Key1: number;
   Key2 :number;

I then have two conversion tables which are key-value pairs of each key to a plain string translation (possibly supporting multiple languages in future)
ie.

Key1 Lookup:
 0: "Thing A",
 1: "Thing B",
 2: "Thing C"
Key2 Lookup:
 0: "OK",
 1: "Bad",
 2: "Worse"

The first lookup table has ~3500 items and will require modification in the future as new features are added. The second has only ~20 or so and is likely static.

I’d like to store these tables on Firebase and use them to translate the stored data to readable text in the app.

I have a working implementation using a local dictionary/map and an pipe (thispipe) handling the translations.

<ion-col> {{ (item?.key1) | thispipe}} </ion-col>

I’d like to utliise the firebase stored key:values instead of a local dictionary to keep app size down and improve maintainability, and I think it would be neater to handle the translations inside the pipe(map) in my data service - similar to this:

//The following code is working nicely, but utilised a local/hardcoded lookupTable

private getReadableFromDataSub(): Observable<DeviceDataReadable> {
    return this.afdb.list('somelocation').valueChanges().pipe(
      map(x => new DisplayPacket(x, this.lookupMap)) 
      //this translates the raw data to human readable using a local lookupMap
    );
  }

//note this is local, I want to use firebase data or sync'ed local data
private setupLookup() {
    this.lookupMap.set("92",  {name:"Engine Percent Load At Current Speed", unit: "%"});
    this.lookupMap.set("100", {name:"Engine Oil Pressure", unit: "kPa"});
    this.lookupMap.set("158", {name:"Keyswitch Battery Potential ", unit: "V"});
    this.lookupMap.set("171", {name:"Ambient Air Temp", unit: "°C"});
    this.lookupMap.set("190", {name:"Engine Speed", unit: "RPM"});
    this.lookupMap.set("sig", {name:"Cell Signal", unit: "bars"});
  }

I’d appreciate any advice! Hopefully I’ve made it somewhat clear what I’m after!

Kind Regards,
Alex

Posts: 1

Participants: 1

Read full topic

E2E testing when using @ionic/storage

$
0
0

@larsrayvn wrote:

I’m using @ionic/storage in my app, to store some values.
Now I’ve started making E2E tests, and i struggle figuring out how to access that (@ionic/storage) storage, and not just the browsers default local storage. Anyone that can point me in the right direction?

Thanks in advance.
Lars

Posts: 1

Participants: 1

Read full topic

Ionic 4 tab-bar cutting content

$
0
0

@npro27 wrote:

Howdy
Please help me with css in Ionic.
Now I have layout like this : Screenshot_6
My button was cut
I try to add “overflow: visible” for all of tags, but it’s doesn’t work.(

.place-button-wrapper{
    position: absolute;
    bottom: 20px;
}

<ion-tabs>
...
    <ion-tab-button tab="places">
      <div class="place-button-wrapper" >
        <img class="tabs-icon" src="assets/icons/mapiconelepse.png" alt="">
      </div>
    </ion-tab-button>
...
</ion-tabs>

Posts: 1

Participants: 1

Read full topic


Smart glass

$
0
0

@mobiledgroove wrote:

Good Morning,

Is it possible to use ionic to develop an app for smart glass(2D)? (epson moverio, google glass etc…)

Thank you

Posts: 1

Participants: 1

Read full topic

Create a full page white background for loading controller

$
0
0

@thehuangkai wrote:

Hi everyone,

I am using the loading controller to create a loading screen.

However I want it to be full page and opaque so that the user do not see what is happening on the screen when it is loading. the current version has a grey translucent screen

Any idea how that can be done?

Posts: 1

Participants: 1

Read full topic

App rate plugin issue

$
0
0

@flycoders_sourav1 wrote:

While i use app rate plugin and try to implement in app.component page. and build properly but when i installed in real device’s app showing blank white screen

Posts: 1

Participants: 1

Read full topic

Plugins native error: Object(…) is not a function

$
0
0

@JorchDeveloper wrote:

Hi, I have had problems with an error that I have given certain plugin. In concrete those ones:

import { FilePath } from ‘@ionic-native/file-path/ngx’;
import { FileChooser } from ‘@ionic-native/file-chooser/ngx’;
import { IOSFilePicker } from ‘@ionic-native/file-picker/ngx’;
import { FileOpener } from ‘@ionic-native/file-opener/ngx’;
import { Geolocation } from ‘@ionic-native/geolocation/ngx’;
import { LaunchNavigator } from ‘@ionic-native/launch-navigator/ngx’;
import { Base64 } from ‘@ionic-native/base64/ngx’;

I added the ngx since they were giving me compilation errors (here is the post that solved the problem for me (https://stackoverflow.com/questions/54361396/ionic-3-error-install-native-plugin-after-ionic-4-release)) in my module.app. Once I added the termination of the imports, the application compile but when using any of the funtion of plugins I get the error ERROR TypeError: Object (…) is not a function
I have plugin and ionic versions updated.

Muchas gracias.

Posts: 2

Participants: 2

Read full topic

Add tabs and side menu globally

$
0
0

@akhilkathi97 wrote:

I am using the latest ionic 4.10.0. I want to create a template with tabs and side menu on every page.I made required changes elsewhere for menu to display.I formatted the app.component.html to look like this.


<ion-app>

<ion-split-pane>

<ion-menu>

<ion-header>

<ion-toolbar>

<ion-title>Menu</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-list>

<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">

<ion-item [routerDirection]="'root'" [routerLink]="[p.url]">

<ion-icon slot="start" [name]="p.icon"></ion-icon>

<ion-label>

{{p.title}}

</ion-label>

</ion-item>

</ion-menu-toggle>

</ion-list>

</ion-content>

</ion-menu>

<ion-router-outlet main></ion-router-outlet>

</ion-split-pane>

<ion-tabs>

<ion-tab-bar slot="bottom">

<ion-tab-button tab="tab1">

<ion-icon name="home"></ion-icon>

<ion-label>Home</ion-label>

</ion-tab-button>

<ion-tab-button tab="tab2">

<ion-icon name="mic"></ion-icon>

<ion-label>AskBot</ion-label>

</ion-tab-button>

</ion-tab-bar>

</ion-tabs>

</ion-app>

Either the menu works or tab works.Combination of both doesn’t work

Posts: 1

Participants: 1

Read full topic

Viewing all 48979 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>