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

Getting error on installing ionic

$
0
0

@chakradharsw wrote:

Hello guys,
if i run npm install -g ionic cordova.I’m getting below issue.

npm ERR! path /usr/local/bin/ionic

npm ERR! code EEXIST

npm ERR! Refusing to delete /usr/local/bin/ionic: …/lib/node_modules/ionic/bin/ionic symlink target is not controlled by npm /usr/local/lib/node_modules/ionic

npm ERR! File exists: /usr/local/bin/ionic

npm ERR! Move it away, and try again.

Posts: 1

Participants: 1

Read full topic


Question regarding input focus "scroll into view" behaviour

$
0
0

@ZaLiTHkA wrote:

I’m working on an Ionic 3 app that’s somehow ended up with some very strange scrolling behaviour when I focus on input fields… To make it even more strange, this only happens on one page in my app.

Unfortunately I have been unable to reproduce this behaviour in any other apps and the app itself is proprietary, so I can’t share my code.

There is one interesting point that I discovered just now though: if I set focus to an input field using document.getElementsByTagName("input")[0].focus(), then it shows my keyboard and scrolls into view exactly as it should, but when I tap on the input field on my device screen, it scrolls down by approximately 50px.

As far as I can tell, the same thing happens on both Android and iOS, and only on one page of my app. I have no fancy focus or “tap” event listeners configured, so there’s no custom code (that I know of) that might be overriding or interfering with the focus event. I’ve tried setting an “Event Listener Breakpoint” on the “scroll” event as well as a manual breakpoint in the scrollCallback function of ScrollView.prototype.enableNativeScrolling() in ionic-angular/util/scroll-view.js, but all that helped me work out is that when the page is scrolled all the way to the top, tappng an input field sometimes makes it scroll correctly and sometimes doesn’t trigger a scroll at all. Meanwhile, when not scrolled to the very top of the page, it always makes it scroll down slightly instead.

I do realise this will be really difficult to debug without being able to share my code, but could someone perhaps just point me in the right direction with regards to working out what might be causing this behaviour? What could/should I check here?

Posts: 1

Participants: 1

Read full topic

How to close editing of a text input when an alertcontroller comes up

$
0
0

@dtarvin wrote:

I am using Ionic 3 for a desktop app. I have a page with a list. The user can edit an entry on the list by clicking the edit button by the text input. The user can also add an item to the list by clicking on the Add button above the list. When the Add button is clicked, an Alertcontroller appears. However, if the Edit button on a list item was clicked before clicking the add button and had not been cancelled or saved, then when you close the alertcontroller the edit field on the list item is still open. How do I get the editing of the list item to close without saving changes when the alertcontroller pops up?

Here is what I think is the relevant code:

settings.ts

    addTapped(event, cell, rowIndex) {
        const prompt = this.alertCtrl.create({
          title: "Add " + this.selectedItem.label.slice(0, 
this.selectedItem.label.length-this.selectedItem.trimSingle),
          cssClass: 'buttonCss',
          enableBackdropDismiss: false,
          inputs: [
            {
              name: 'name',
            }
          ],

          buttons: [

            {
              text: 'Cancel',
              cssClass: 'item-button button button-md button-outline button-outline-md'
            },
            {
              text: 'Save',
              handler: data => {
                this.saveNewRow(data);
              },
              cssClass: 'buttonColor item-button button button-md button-default button-default-md button-md-pm-yellow'

            },

          ],

        });
        prompt.present();
        console.log("You clicked on a detail.");
      }

    saveNewRow(data) {
        this.selectedItem.service.findOne({order: "id DESC"}).subscribe(result => {
          console.log('The result is ', result);
          this.editRowId = result.id+1;
          this.editRowData = { id: this.editRowId, name: data.name };
          console.log('editRowData is ', this.editRowData);
          this.selectedItem.service.create(this.editRowData).subscribe(result => {
            this.refreshRows();
          }, error => {
            console.log(error);
            const noSaveNewRow = this.alertCtrl.create({
              title: 'Unable to save ' + this.editRowData + ' new row.',
              buttons: [
                {
                  text: 'Dismiss',
                  cssClass: 'item-button button button-md button-outline button-outline-md'
                }
              ]
            });
            noSaveNewRow.present();
          })
        }, error => {
          console.log(error);
          const noSaveNewRow = this.alertCtrl.create({
            title: 'Unable to save ' + this.editRowData + ' as new row.',
            buttons: [
              {
                text: 'Dismiss',
                cssClass: 'item-button button button-md button-outline button-outline-md'
              }
            ]
          });
          noSaveNewRow.present();
        })
      }

    saveRow(name) {
        let newName = name.nativeElement.value;  
        if (newName !== this.editRowData["name"]) {
          this.editRowData["name"] = newName;
          this.selectedItem.service.updateAttributes(this.editRowData["id"], this.editRowData).subscribe(result => {
            let rows = this.rows;
            this.editRowIndex = null;
            this.rows = [...this.rows];
          }, error => {
            console.log(error);
            const noSaveRow = this.alertCtrl.create({
              title: 'Unable to change row name to ' + this.name + '.',
              buttons: [
                {
                  text: 'Dismiss',
                  cssClass: 'item-button button button-md button-outline button-outline-md'
                }
              ]
            });
            noSaveRow.present();
          });
        }
      }

      editRow(rowIndex) {
        this.editRowData = this.rows[rowIndex];
        this.editRowId = this.rows[rowIndex].id;
        this.editRowName = this.rows[rowIndex].name;
        this.editRowIndex = rowIndex;
        setTimeout(() => this.name.nativeElement.focus(), 50);
      }

      cancelEditRow(rowIndex) {
        this.rows[rowIndex].name = this.editRowName;
        this.editRowIndex = null;
      }

settings.html

    <ion-list inset>
        <ion-list-header>
            <div style="vertical-align: top;">
                <span class="settingsHeader">{{ selectedItem.label }}</span>
                <button ion-button color="pm-yellow" (click)="addTapped($event, item)">Add</button>
                <button ion-button outline (click)="cancelTapped()">Cancel</button>
            </div>
        </ion-list-header>
        <ion-card>
            <ion-card-content>
                <ngx-datatable #mydatatable class="ngx-datatable bootstrap material expandable" 
                columnMode="flex" [headerHeight]="50" [footerHeight]="0" [rowHeight]="50" [scrollbarH]="false" 
                [scrollbarV]="true" [rowHeight]="50" [summaryRow]="false" [summaryPosition]="'bottom'" 
                [loadingIndicator]="loading" [rows]="rows" [columns]="columns">
                    <div>
                        <ngx-datatable-column name="ID" [flexGrow]=".25"></ngx-datatable-column>
                        <ngx-datatable-column name="Name"  [flexGrow]="3">
                            <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" 
                      let-row="row">
                                <span *ngIf="editRowIndex != rowIndex">
                        {{ value }}
                                </span>
                                <input type="text" #name                          
                      *ngIf="editRowIndex === rowIndex"                          
                      [value]="value"
                        />
                            </ng-template>
                        </ngx-datatable-column>
                        <ngx-datatable-column name="Edit" prop="Edit" [flexGrow]="1.75">
                            <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
                                <span class="mobile-hidden"></span>
                            </ng-template>
                            <ng-template let-value="value" let-rowIndex="rowIndex" ngx-datatable-cell-template>
                                <span class="mobile-hidden button-spacing">
                                    <button ion-button small *ngIf="editRowIndex !== rowIndex" 
                        (click)="editRow(rowIndex)">Edit</button>
                                    <button ion-button small outline *ngIf="editRowIndex !== rowIndex" 
                        (click)="deleteRow(rowIndex)">Delete</button>
                                    <button ion-button color="pm-yellow" small *ngIf="editRowIndex === rowIndex" 
                        (click)="saveRow(name)">Save</button>
                                    <button ion-button outline small *ngIf="editRowIndex === rowIndex" 
                        (click) = "cancelEditRow(rowIndex)">Cancel</button>
                                </span>
                            </ng-template>
                        </ngx-datatable-column>
                    </div>
                </ngx-datatable>
            </ion-card-content>
        </ion-card>
    </ion-list>

Posts: 1

Participants: 1

Read full topic

Ionic 4 - POS Print

$
0
0

@Appslanka wrote:

Hi guys,
I am working with a Simple POS web application using angular 4.
Is there any good solution for POS printing(thermal /raw) ?

Posts: 1

Participants: 1

Read full topic

Ionic MySQL notification

$
0
0

@murrayxaiyan wrote:

Hi, I’m still learning about ionics and I’d like to know if my ionic application has any way of knowing when a new row is inserted into a table in mySQL.
The context of this is because I have a program that detects falls of older adults, doing so inserts the date of the fall into a table, so I am interested in receiving notification to the application when a new row is inserted in my table.
Is it possible to achieve that ?, Since I do not know how to make my application constantly listen to a URL.

Posts: 1

Participants: 1

Read full topic

Is there any way to build only a specific page in Ionic?

$
0
0

@skildfrix wrote:

I have a project that has plenty of pages which some components require login authentication from the server to navigate within the application. I wanted to access a specific page to test native plugins that doesn’t work on live debugging. I can save time rebuilding the project that way bypassing login authentication and navigating for that page manually. I wonder if this is possible for the sake of testing the module I’ve been working on with native plugins that works only on an APK build.

For now, I use ionic cordova run android to build my apk for my physical device running on Android 8.1.0. I hope someone could give me a good information about this. Thank you!

Posts: 1

Participants: 1

Read full topic

Is there a way to group/merge two related JSON?

$
0
0

@OxlPrince wrote:

I have a project that has two related json data. I want to group or merge that two json based the related object to be displayed as an accordion list.

Here is an example of that two related json :

The one is like this

    {
        {
          "ObjectId": '001',
          "ObjectName": 'Fruits'
        },
        {
          "ObjectId": '002',
          "ObjectName": 'Vegetables'
        }
    }

And the other one like this

    {
        {
          "Name": 'Apple',
          "Color": 'Red',
          "ObjectId": '001'
        },
        {
          "Name": 'Eggplant',
          "Color": 'Purple',
          "ObjectId": '002'
        },
        {
          "Name": 'Banana',
          "Color": 'Yellow',
          "ObjectId": '001'
        },
        {
          "Name": 'Spinach',
          "Color": 'Green',
          "ObjectId": '002'
        },
        {
          "Name": 'Garlic',
          "Color": 'White',
          "ObjectId": '002'
        },
    }

I hope someone could give me a solution. Thanks in advance!

Posts: 2

Participants: 2

Read full topic

Is it possible to make a run tracker app in ionic?

$
0
0

@renasance21 wrote:

Havent started learning about angular and ionic, but just a heads up for me if it is possible an app like Nike run? Tracking you with GPS and recording it with time and average speed of the run. Thanks!

Posts: 1

Participants: 1

Read full topic


Audio volume levels

$
0
0

@JAR19 wrote:

OK here’s the issue. My ionic app has been out on the app store for six months or so. This week a user reported a problem where sometimes she cannot hear the audio files being played, whereas if she switches to another app the sound is OK.
I am not IOS expert but I suspect the audio volumes levels are being set lower for the webview by one of the other apps that are running.

What do you think - is that likely scenario?

Problem 2 is what to do about the volume levels, there seems little documentation on how to adjust the volumes levels and what solutions are out there are platform specific where goes against the idea of write once for all platforms.

Posts: 1

Participants: 1

Read full topic

Fix ion-segment button on the top of the page

$
0
0

@pksquare wrote:

segment

this is my page i want to fix the segment button while scrolling the page. How would i achieve this please help

Posts: 1

Participants: 1

Read full topic

Kill tasks in background after some min?

$
0
0

@ahmadklsany wrote:

hello everyone >>>
I send API from my app to my dataBase to save some info
and i used interval or observable.interval or setTimeOut
the problem is just in background mod and after 5 min in background no data save in database
i think my OS stop app tasks after 5 min , so i am looking for something to prevent OS stop my App tasks
any helps ?
thanks

Posts: 1

Participants: 1

Read full topic

WkWebview with Advanced-http & native-http-connection-backend

$
0
0

@JMourao wrote:

Hello,

I am finally porting my application to use WkWebview, but since i am using some third party APIs i had problems with CORS, this led me to use the plugin https://github.com/silkimen/cordova-plugin-advanced-http, great this solves my problem of CORS not working on the device, but adds a problem browser now doesn’t work for development(bummer) i have found then the following plugin https://github.com/sneas/ionic-native-http-connection-backend which fixes my problem about not working on the Browser.

So currently my application is working on the Browser which is great. Is also working 100% on the device. But now i have a problem. Since i am using native http requests they will not show up in the “network” section of my browser but i also use the connection-backend plugin which wraps all the calls. Now i dont know how can i check the network requests in case is needed to debug some issue. Anyone has any idea?

Best regards
JMourao

Posts: 1

Participants: 1

Read full topic

"sudden removal of @angular "as soon as i install ionic app scripts

$
0
0

@sdhupe19 wrote:

Ionic:

ionic (Ionic CLI) : 4.5.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.0, browser 5.0.3
Cordova Plugins : cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 1.1.1, (and 24 other plugins)

System:

NodeJS : v8.9.4 (/home/shubham/.nvm/versions/node/v8.9.4/bin/node)
npm : 5.6.0
OS : Linux 4.15

Posts: 1

Participants: 1

Read full topic

Unable to use template variables inside ts file

$
0
0

@sdhupe19 wrote:

we are using <ion-tags-input [(ngModel)]=“tags” [verifyMethod]=“verifyTag”> as follows
<ion-tags-input [(ngModel)]=“emails” [type]="‘email’" [color]="’#DC7054’" [maxTags]=“10” [once]="‘true’" (onChange)=“onChange()” [verifyMethod]=“verifyTag”>myname@gmail.com;
but inside the functiion verifyTag we are unable to use ‘this reference’ or any other ts variable

verifyTag(str: string): boolean{
console.log(" gottttttttttttttttttttttt" + JSON.stringify(str) + “other” + this.email.toLocaleLowerCase())
// if(email== str){
// return false;
// }

var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(str).toLowerCase());

}

can anyone suggest how to fix this?

Posts: 1

Participants: 1

Read full topic

Ionic 3 Windows 10 app HTTP POST replaced by GET

$
0
0

@avishai_peretz_dev wrote:

Hey,
I am develop ionic 3 app all works fine when serve on browser, but when i run it on windows as app the http post request replaced by get request.
Ayn idea?

Posts: 1

Participants: 1

Read full topic


Ionic 4: Default route now working

$
0
0

@loki9182 wrote:

The default path in app-routing.module.ts does not seem to be working in my app.
Here is the start of the file:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IsReadyGuard } from './is-ready.guard';
import { LoggedInGuard } from './logged-in.guard';

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', canActivate:[IsReadyGuard], loadChildren: './pages/login/login.module#LoginPageModule' },

When I navigate to localhost:8100/login, I see my login page no problem.
If I simply go to localhost:8100, I just get a blank page. (I removed the canActivate guard on /login but no help)

So I tried a patch by adding a condition in app.component.ts after platform.ready()

if (window.location.pathname === "/"){
      this.router.navigateByUrl('/login');
    }

This works BUT it seems to stack /login as the second page in the navigation stack. The back button (on browser and android) brings me back to a blank page so I’m guessing I’m seeing app.component.ts without a selected path?

Any idea why my default path is not working?
Otherwise, does anyone know what’s the latest and greatest method of managing the navigation stack in Ionic 4? Is there a way I can specify that I want /login to be first (root) in the navigation stack?

Here’s my ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.8.0 (C:\Users\lucch\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.12.2
   @angular-devkit/schematics    : 7.0.6
   @angular/cli                  : 7.0.6
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.2, (and 5 other plugins)

System:

   NodeJS : v11.4.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Posts: 1

Participants: 1

Read full topic

The menu is loaded twice on login plz your help

$
0
0

@eergreyes wrote:

Hello friends I would appreciate your help, I’ve been trying to solve this problem for a week.

Error:
the error is when in app.component.ts valid if the user is logged in redirected to Menupage that shows a tab menu combined with sidebar, when the redirection is done the menu page loads twice and this makes the menu disappear.

Ionic:

ionic (Ionic CLI) : 4.7.1 (/home/ereyes/.nvm/versions/node/v8.12.0/lib/node_modules/ionic)

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : not available
Cordova Plugins : not available

System:

NodeJS : v8.12.0 (/home/ereyes/.nvm/versions/node/v8.12.0/bin/node)
npm : 6.4.1
OS : Linux 4.15

app.component.ts:
export class MyApp {
rootPage:any = ‘LoginPage’;
private app;
private platform;
pages;
authState: any = null;

@ViewChild(Nav) nav: Nav;
constructor(private zone: NgZone,app: App, platform: Platform,private statusBar: StatusBar, splashScreen: SplashScreen,private auth: AuthService) {
this.app = app;
this.platform = platform;
this.initializeApp();
}

initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
});
this.auth.afAuth.authState.subscribe( user => {
console.log('user----------- '+user);
if ( user ){
this.rootPage = ‘MenuPage’;
//console.log('user '+ JSON.stringify(user));
}else{
this.rootPage = ‘LoginPage’;
//console.log('not logged: '+ JSON.stringify(user));
}
});
}
}

menu.ts:
export class MenuPage {

rootPage = ‘TabsPage’;

@ViewChild(Nav) nav: Nav;

pages: PageInterface = [
{title: ‘Perfil’, pageName: ‘ProfilePage’, index: 1, icon: ‘person’ },
{title: ‘Mis Direcciones’, pageName: ‘ProfilePage’, index: 1, icon: ‘md-map’ },
{title: ‘Historico de Pedidos’, pageName: ‘ProfilePage’, index: 1, icon: ‘ios-list-box-outline’ },
]

constructor(public navCtrl: NavController, public navParams: NavParams,private auth: AuthService) {

}

openPage(page: PageInterface) {
let params ={};
this.nav.setRoot(page.pageName, params, { animate: true, duration: 600, direction: ‘backward’ });
}

logout() {
this.auth.signOut();
this.nav.setRoot(‘LoginPage’);
}
}

best regards

Posts: 1

Participants: 1

Read full topic

App is not launching in emulator

Run apk file without internet connection ine the first page load

Ion toggle issue

Viewing all 48980 articles
Browse latest View live


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