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

Ionic 4 Modal navParams NOT WORKING


How to perform Angular AoT compilation for an Ionic app?

$
0
0

@renerheaume wrote:

Is there an Ionic-specific way to perform ahead of time compilation of Angular templates of an Ionic app or do I just follow the instructions from the official Angular documentation for the version of Angular that Ionic uses?

Posts: 1

Participants: 1

Read full topic

Translation system with on-the-fly switch and update that is still compatible with AoT compilation

$
0
0

@renerheaume wrote:

Hello,

I am looking for an internationalization library for my Ionic app with the following features:

  • being able load a translation file at runtime, which enables:
    • for the end-user, switching language at runtime
    • making a new language available WITHOUT compiling and publishing again to the app stores
    • publishing typo corrections on the spot, i.e. without compiling and publishing
  • but still be usable with ahead-of-time compilation
    • without hassles (an hassle being having to compile per-language variations)

What are your suggestions?

Posts: 1

Participants: 1

Read full topic

Ionic problems with NavCtrl and Click

$
0
0

@JulioNicolasPapp wrote:

Hello everyone, i’m making an App for IOS, with a menu that has several buttons on it. And, i encountered an issue, the first time i click on a button, that invoques an NavCtrl.push() to show the content of that button it works just fine, but when i go back to the principal menu, and try to click on another button, it doesn’t work the first time, i have to click on it a few times to make it work.

I think that the issue is that when i go back to the menu, the app is not ready to recieve clicks on the buttons. Can that happen?

Thank you so much.

This is the code:

HOME.HTML

<ion-content overflow-scroll="false">
<img class="header_image" src="{{headers}}">     
<img src="assets/imgs/logo_320.png" [ngClass]="{ 'hide': this.mostrar==0 }" class="icono_vivilacosta animation-target">
<ion-grid>
    <ion-row justify-content-center align-items-center>
        <ion-col *ngFor="let inicio of principal" class="Cuadrados {{inicio.clase}}" (click)="VerPagina(inicio.pagina)">
            <div class="ConteinerIcono">
                <img src="{{inicio.icono}}" class="icono ">
                <p class="Categoria"> {{inicio.titulo}} </p>
            </div>
        </ion-col> 
    </ion-row>
  </ion-grid> 

HOME.TS:

export class HomePage {
      principal;
      url;
      headers;
      mostrar;
      constructor(public navCtrl: NavController, public http: HttpClient,public loadingCtrl: LoadingController) {
        this.url = '*********';
        let loading = this.loadingCtrl.create({
          content: 'Cargando...'
        });
        loading.present(); 
        this.http.get(this.url).subscribe((data) => {
          if (Object.keys(data).length!=0){
            this.headers = data[0].imageUrl;
            this.mostrar = data[0].logoVisibility;
          } else {
            this.headers = 'assets/imgs/header.png';
            this.mostrar = 1;
          }
          loading.dismiss();
        });

        this.principal = [
          {
            titulo: 'EVENTOS',
            clase: 'EVENTOS',
            pagina: 'EventosPage',
            icono: 'assets/imgs/eventos.png'
          },
          {
            titulo: 'CINE Y TEATRO',
            clase: 'CINESYTEATROS',
            pagina: 'CinesPage',
            icono: 'assets/imgs/cineteatro.png'
          },
          {
            titulo: 'NOTICIAS',
            clase: 'NOTICIAS',
            pagina: 'NoticiasPage',
            icono: 'assets/imgs/noticias.png'
          },
          {
            titulo: 'PARQUES',
            clase: 'PARQUES',
            pagina: 'ParquesPage',
            icono: 'assets/imgs/parques.png'
          },
          {
            titulo: 'CAJEROS',
            clase: 'CAJEROS',
            pagina: 'CajerosPage',
            icono: 'assets/imgs/cajeros.png'
          },
          {
            titulo: 'TELEFONOS',
            clase: 'TELEFONOS',
            pagina: 'TelefonosPage',
            icono: 'assets/imgs/telefonos.png'
          }
        ];
      }
      VerPagina(Variable){
        switch(Variable) { 
          case 'EventosPage': { 
            this.navCtrl.push(EventosPage);
          break; 
          } 
          case 'CinesPage': { 
            this.navCtrl.push(CinesPage);
          break; 
          } 
          case 'NoticiasPage': { 
            this.navCtrl.push(NoticiasPage);
          break; 
         } 
         case 'ParquesPage': { 
          this.navCtrl.push(ParquesPage); 
          break; 
        }
        case 'TelefonosPage': { 
          this.navCtrl.push(TelefonosPage); 
          break; 
        }
        case 'CajerosPage': { 
          this.navCtrl.push(CajerosPage); 
          break; 
        } 
       }   
      }

    }

Posts: 1

Participants: 1

Read full topic

Can ionic cordova build android is execute by www-data

$
0
0

@rasyidcode wrote:

So my working with my project with requires this kind of capable, i combined laravel and ionic and call ionic /www folder from laravel public and its working great, but my project is actually want to directly convert this www to apk which is like online ‘appbuilder’, so i made a route that execute ionic using exec command from php, what am tryting to execute is ionic cordova build android, so whenever user go to this route it will directly generate and download the apk, i have read all the stackoverflow topic related to this issue but nothing works. I know that whenever we execute from exec(), shell_exec() and backticks operator the user that actually run this is www-data, and this www-data has a lot of problem with permission. i got below error when i try to run ionic cordova build android using www-data:

using this command: sudo -u www-data ionic cordova build android (why did i do this, because if i run from web browser it will pop 504 error which is bad idea cus i can’t see the error)

shell.js: internal error
Error: EPERM: operation not permitted, chmod '/var/www/html/instantapp-inovidea/public/mobileapps/helloworld/platforms/android/app/src/main/res/xml/config.xml'
    at Object.chmodSync (fs.js:1023:3)
    at copyFileSync (/var/www/html/instantapp-inovidea/public/mobileapps/helloworld/platforms/android/cordova/node_modules/shelljs/src/cp.js:41:6)
    at /var/www/html/instantapp-inovidea/public/mobileapps/helloworld/platforms/android/cordova/node_modules/shelljs/src/cp.js:201:5
    at Array.forEach (<anonymous>)
    at Object._cp (/var/www/html/instantapp-inovidea/public/mobileapps/helloworld/platforms/android/cordova/node_modules/shelljs/src/cp.js:157:11)
    at Object.cp (/var/www/html/instantapp-inovidea/public/mobileapps/helloworld/platforms/android/cordova/node_modules/shelljs/src/common.js:186:23)
    at updateConfigFilesFrom (/var/www/html/instantapp-inovidea/public/mobileapps/helloworld/platforms/android/cordova/lib/prepare.js:98:11)
    at Api.module.exports.prepare (/var/www/html/instantapp-inovidea/public/mobileapps/helloworld/platforms/android/cordova/lib/prepare.js:42:20)
    at Api.prepare (/var/www/html/instantapp-inovidea/public/mobileapps/helloworld/platforms/android/cordova/Api.js:192:45)
    at /usr/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/prepare.js:105:36
[ERROR] An error occurred while running subprocess cordova.

        cordova build android exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.

before i got above error i changed the config.xml permission under platforms/android/app/src/res/xml to 777, but if change it back to 666, the error will look like this:

cp: copyFileSync: could not write to dest file (code=EACCES):/var/www/html/instantapp-inovidea/public/mobileapps/helloworld/platforms/android/app/src/main/res/xml/config.xml

EACCES: permission denied, open '/var/www/html/instantapp-inovidea/public/mobileapps/helloworld/platforms/android/app/src/main/res/xml/config.xml'

idk what permission to let to www-data to be able to execute this ionic cordova command, any help would be great, thanks.

ps: sorry if my english is not good, im trying my best to explain everything.

Posts: 2

Participants: 1

Read full topic

Create a show more option on click in my app

How to prevent scroll down not scroll up

$
0
0

@mathewk wrote:

Hi, Did anyone knows how to prevent scroll down not scroll up? If I disable overflowY hidden both scroll up and down will not work.is there any way to restrict scroll according to the direction of the scroll.

Posts: 1

Participants: 1

Read full topic

Disable ionic proxy

$
0
0

@mavillavishnu wrote:

Hello all,
I am working on an ionic app where the app calls api for authentication.
I have successfully setup the proxy in ionic as i was getting CORS error in the api call.
Now when i try to build the project in either browser or android app, the actual URL that was setup in proxy settings was not being taken and instead the localhost URL is being called.
Example:
URL in ionic serve:
www.mydomain.com/user/login/
URL after build:
localhost:8100/user/login

I know i am missing something, but i got no idea in removing proxy settings as i a a newbie.
Please help me out.

Posts: 1

Participants: 1

Read full topic


Clear image cached in a view

$
0
0

@Luisejo wrote:

Hi everyone, this is my first post in the forum and I think my english is not pretty good. I hope can explain my problem well.

I have a view where I am showing a picture of a profile. In this app we have de possibility for changing the picture using the camera plugin of cordova. When you take a new picture with the camera in the device, the picture up to the server perfertly, but later, when I am loading the new picture the view show me the old picture. I am sure that the picture is cached. For example, if I change the route image.png for image.png?123 I can see the new image, but this is not a solution.

What can I do?
Thanks.

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.4, browser 5.0.4, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-webview 2.3.1, (and 12 other plugins)

System:

Android SDK Tools : 26.1.1 (/Users/mac/Library/Android/sdk/)
ios-deploy : 1.9.4
NodeJS : v11.2.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS High Sierra
Xcode : Xcode 10.1 Build version 10B61

Posts: 1

Participants: 1

Read full topic

setRoot after pushing modal controller breaks NavigationBar

$
0
0

@ChristianStr wrote:

Hello,

I am trying to use:

this.navCtrl.setRoot(ThirdPage)

from SecondPage after I called the following:

let modal = this.modalCtrl.create(SecondPage);
modal.present();

from FirstPage.

So: FirstPage -modal.push()-> SecondPage -setRoot()-> ThirdPage -> navBar broken

Somehow after this, the navbar turns thinner and now I am not able to get access to the navbar buttons.
Is there a workaround?
I am now using setRoot() for both transitions but it doesn’t look as smooth as pushing it.

I hope I could make it clear. Thanks in advance!

Posts: 1

Participants: 1

Read full topic

How to open external pdf into a Ionic3 frame?

$
0
0

@ioclaudio wrote:

Hi,
I have to open from an Ionic3 app the PDF files hosted on a remote server.
I want to open these files, if possible, into a frame of the app.
The web server returns the raw PDF files after a call done using the BasicAuthentication:
For example, http://myserver.com/viewdoc/54 (with username and password passed in the header)

I’ve tried this:
this.navCtrl.push(BrowserPage, {externalUrl: documentUrl});
and it works if Basic Authentication is disabled.

How can I use this method with Basic Authentication?
Does it exist an Angular plugin to show PDF files inside an Ionic app?

Thank you very much

claudio

Posts: 1

Participants: 1

Read full topic

JSON.stringify - How to get same result in all platforms when using circular objects?

$
0
0

@Asixel wrote:

Hi everyone!

I’m trying to store a variable containing an array of objects to the local storage of the device, in order to restore the state of that variable when the application restarts.
Because of the structure of the objects (tree with nodes kind of), they are circular because they contain references to the parent nodes. I spent quite a lot of time to make the code work and restore properly the state of the objects with their functions. Everything worked perfectly while I was testing it in the browser with the command ionic cordova run browser.

Unfortunately, apparently ionic serve, ionic cordova run android and ionic cordova run ios don’t work at all, because when I’m calling the JSON.stringify(this.data); on the variable that contains all the data, I get an error that the object is circular: ERROR TypeError: Converting circular structure to JSON.

What is different when I use the command ionic cordova run browser compared to the 3 above commands, and how can I have the same behavior on Android and iOS too (preferably without re-writing the code that I wrote)?

Using Smart-Circular and another solution that removed circular references didn’t work, as those are needed when restoring the data and somehow ionic cordova run browser handles it just fine.

Here are some information about my installation if it’s any use:

Ionic:

   ionic (Ionic CLI)  : 4.3.1 (xxx\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, browser 5.0.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.3, (and 20 other plugins)

System:

   Android SDK Tools : 26.1.1 (yyy\Android\SDK)
   NodeJS            : v8.9.4 (xxx\nodejs\node.exe)
   npm               : 6.3.0
   OS                : Windows 7

Posts: 1

Participants: 1

Read full topic

iOS - Webthread - Javascript Core crash

$
0
0

@lavc wrote:

Device : iPhone 6s
IOS Version : 12.1.2 (16C101)

Implemented Fabric Crashlytics Plugin :

I get this crash report only on above specific device and OS

0 JavaScriptCore 0x1a43f1518 bmalloc::Heap::allocateLarge(std::__1::unique_lockbmalloc::Mutex&, unsigned long, unsigned long) + 24
1 JavaScriptCore 0x1a43f150c bmalloc::Heap::allocateLarge(std::__1::unique_lockbmalloc::Mutex&, unsigned long, unsigned long) + 12
2 JavaScriptCore 0x1a43ebe10 bmalloc::Allocator::allocateLarge(unsigned long) + 152
3 JavaScriptCore 0x1a43ebc04 bmalloc::Allocator::reallocate(void*, unsigned long) + 512
4 JavaScriptCore 0x1a43b5e78 WTF::fastRealloc(void*, unsigned long) + 52
5 JavaScriptCore 0x1a43cfac4 + 84
6 JavaScriptCore 0x1a43ce2e8 + 104
7 JavaScriptCore 0x1a43cf1e8 WTF::StringBuilder::appendQuotedJSONString(WTF::String const&) + 452
8 JavaScriptCore 0x1a4ce60ac JSC::Stringifier::appendStringifiedValue(WTF::StringBuilder&, JSC::JSValue, JSC::Stringifier::Holder const&, JSC::PropertyNameForFunctionCall const&) + 1232
9 JavaScriptCore 0x1a4ce7bb4 JSC::Stringifier::Holder::appendNextProperty(JSC::Stringifier&, WTF::StringBuilder&) + 2764
10 JavaScriptCore 0x1a4ce66bc JSC::Stringifier::appendStringifiedValue(WTF::StringBuilder&, JSC::JSValue, JSC::Stringifier::Holder const&, JSC::PropertyNameForFunctionCall const&) + 2784
11 JavaScriptCore 0x1a4ce59e0 JSC::Stringifier::stringify(JSC::JSValue) + 348
12 JavaScriptCore 0x1a4cecc88 JSC::JSONProtoFuncStringify(JSC::ExecState*) + 208
13 JavaScriptCore 0x1a4400814 llint_entry + 32692
14 JavaScriptCore 0x1a43ffd34 llint_entry + 29908
15 JavaScriptCore 0x1a4400200 llint_entry + 31136
16 JavaScriptCore 0x1a43ffd34 llint_entry + 29908
17 JavaScriptCore 0x1a43ffd34 llint_entry + 29908
18 JavaScriptCore 0x1a43ffd34 llint_entry + 29908
19 JavaScriptCore 0x1a43ffd9c llint_entry + 30012
20 JavaScriptCore 0x1a43ffd34 llint_entry + 29908
21 JavaScriptCore 0x1a43ffd34 llint_entry + 29908
22 JavaScriptCore 0x1a43f8664 vmEntryToJavaScript + 308
23 JavaScriptCore 0x1a4a67840 JSC::Interpreter::executeCall(JSC::ExecState*, JSC::JSObject*, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&) + 424
24 JavaScriptCore 0x1a4c1ee94 JSC::profiledCall(JSC::ExecState*, JSC::ProfilingReason, JSC::JSValue, JSC::CallType, JSC::CallData const&, JSC::JSValue, JSC::ArgList const&, WTF::NakedPtrJSC::Exception&) + 200
25 WebCore 0x1a6409458 WebCore::JSEventListener::handleEvent(WebCore::ScriptExecutionContext&, WebCore::Event&) + 1100
26 WebCore 0x1a66748f4 WebCore::EventTarget::fireEventListeners(WebCore::Event&, WTF::Vector<WTF::RefPtr<WebCore::RegisteredEventListener, WTF::DumbPtrTraitsWebCore::RegisteredEventListener >, 1ul, WTF::CrashOnOverflow, 16ul>) + 736
27 WebCore 0x1a6672214 WebCore::EventTarget::fireEventListeners(WebCore::Event&) + 260
28 WebCore 0x1a66745f8 WebCore::EventTarget::dispatchEvent(WebCore::Event&) + 124
29 WebCore 0x1a6a6391c WebCore::DOMWindow::postMessageTimerFired(WebCore::PostMessageTimer&) + 164
30 WebCore 0x1a6a6b224 WebCore::PostMessageTimer::fired() + 108
31 WebCore 0x1a6b4402c WebCore::ThreadTimers::sharedTimerFiredInternal() + 352
32 WebCore 0x1a6b88a54 WebCore::timerFired(__CFRunLoopTimer*, void*) + 28
33 CoreFoundation 0x19d041828 CFRUNLOOP_IS_CALLING_OUT_TO_A_TIMER_CALLBACK_FUNCTION + 28
34 CoreFoundation 0x19d041558 __CFRunLoopDoTimer + 864
35 CoreFoundation 0x19d040d8c __CFRunLoopDoTimers + 248
36 CoreFoundation 0x19d03bc68 __CFRunLoopRun + 1880
37 CoreFoundation 0x19d03b1f0 CFRunLoopRunSpecific + 436
38 WebCore 0x1a5eaaeec RunWebThread(void*) + 592
39 libsystem_pthread.dylib 0x19cccc25c _pthread_body + 128
40 libsystem_pthread.dylib 0x19cccc1bc _pthread_start + 48
41 libsystem_pthread.dylib 0x19cccfcf4 thread_start + 4

Posts: 1

Participants: 1

Read full topic

How to fix push not found in Navcontroller

$
0
0

@acryforhelp wrote:

I am getting the following error while using this code. I have also tried to change the push function to setRoot and the same error still persists.

I want to navigate to the home page which is the login page in case the user is not signed in but unable to do so.

The console shows that it entered the if statement but the navctrl command is not getting executed.

MyApp_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property ‘push’ of undefined

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController} from 'ionic-angular';
import * as firebase from 'firebase/app';
import { HomePage } from '../home/home';

/**
 * Generated class for the MainPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-main',
  templateUrl: 'main.html',
})

export class MainPage {



  constructor(public navParams: NavParams, public alertCtrl: AlertController, public navController:NavController) {

  }

  ionViewDidLoad() {

    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        console.log(user);
        console.log('entered in if');
        // User is signed in.
      } else {
        console.log(user);
        console.log('entered in else');
        this.navController.push(HomePage);

        // No user is signed in.
      }
    });

    console.log('ionViewDidLoad MainPage')


  }

}

Posts: 1

Participants: 1

Read full topic

Ionic Webview Update causes storage loss

$
0
0

@danielederosa wrote:

I have an Ionic3 app that has been in production mode in the store for almost a year. An update from cordova-plugin-ionic-webview to version 2.3.1 and UseScheme="true" improves the performance enormously! However, the whole storage is deleted. This is really fatal for an app in production mode.

What can I do to keep or transfer the data in the storage?

What I tried

I tried with plugin cordova-plugin-ionic-migrate-localstorage but does not work, maybe because my cordova-plugin-ionic-webview version is too new for this plugin.

Posts: 1

Participants: 1

Read full topic


Ionic 3 Camera plugin problem

$
0
0

@izpapp wrote:

i have issue when i use the plugin and try to decode the img in the base64

My code

getimage(Type){
let options: CameraOptions;
if (Type == ‘camera’) {
options = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE

};
} else if (Type == ‘gallery’) {
options = {
sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE

};

}

this.camera.getPicture(options).then((img) => {
let base64 = ‘data:image/jpeg;base64,’ + img;
let data = {
token : this.api.token,
picture: base64

}
this.loading = this.loadingCtrl.create({
content: &lt;ion-spinner&#32;name="bubbles"&#32;&gt;&lt;/ion-spinner&gt;&#32;Chargement...
});
this.loading.present();
this.api.post(‘media/upload’,data).toPromise().then((res) => {
this.loading.dismiss();

if (res[‘status’] == 200) {
let alert = this.alertCtrl.create({
title: ‘Information’,
subTitle: ‘Image ajouté avec succès’,
buttons: [{text:‘OK’}]
});
alert.present();
}else
{
let alert = this.alertCtrl.create({
title: res[‘status’],
buttons: [‘Ok’]
});
alert.present();
}
}).catch((e) => {
let alert = this.alertCtrl.create({
title: e.message,
buttons: [‘Ok’]
});
alert.present();
});
});
}

Posts: 1

Participants: 1

Read full topic

Redirection lien avec Deeplink ionic

$
0
0

@sfarouk wrote:

Bonjour la communauté!
J’ai une application avec un lien un profond, dont le fichier config.xml est la suivante:

 <plugin name="ionic-plugin-deeplinks" spec="1.0.17">
        <variable name="URL_SCHEME" value="aefinfo" />
        <variable name="DEEPLINK_SCHEME" value="https" />
        <variable name="DEEPLINK_HOST" value="www.aefinfo.fr" />
        <variable name="ANDROID_PATH_PREFIX" value="C:/Program Files/Git/" />
    </plugin>

et le app.components.ts est la suivante:

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 { Deeplinks } from '@ionic-native/deeplinks';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private deeplinks: Deeplinks) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();

      //initialisation de deeplink
      this.deeplinks.route({
        '/': {},
        '/depeche': { "depeche": true }
      }).subscribe((match) => {
        alert(JSON.stringify(match));
        /*   let idDepeche = JSON.stringify(match.$args.id);
           let id = idDepeche.replace('"', '');
           let id1 = id.replace('"', '');
   
           this.appCtrl.getRootNav().push(DepechePage, {
             id: id1
           });*/
      }, nomatch => {
        alert(Number("597887"));
      });

    });
  }
}

j’ai crée ses 2 liens sur codepen:

<h1><a href="aefinfo://www.aefinfo.fr/depeche/?id=598007">lien vers AEF</a></h1>
<h1><a href="https://www.aefinfo.fr/depeche/?id=598007">lien interne vers AEF</a></h1>

Alors quand je clique sur le premier lien:

lien vers AEF

, il détecte et m’ouvre bien application, tout marche. Maintenant ce que je voudrais c’est de pouvoir cliquer sur le deuxième lien:

lien interne vers AEF

et qu’il m’ouvre aussi l’application.
Merci pour votre aide

Posts: 2

Participants: 2

Read full topic

[Ionic 4] Dynamically populate ion-select options from loaded array using ngFor

$
0
0

@sanesma93 wrote:

Hey there everyone.
I am working on an app where you can create transactions and save/load the information of the transactions as templates for future use.

I can save the form information as a template without problem yet the issues appear when trying to load previously saved templates. What I am trying to do is that once the user clicks on the ion-select, the pop-up opens and is populated with all the saved templates as options though I don’t know how to do this dynamically.
Here’s some relevant template code

export class TemplateService {
  public templates: Template[] = [];
  public loaded: boolean = false;

  constructor(private storage: Storage) {

  }

  load(): Promise<boolean> {

    //return promise so we know when operation is completed
    return new Promise((resolve) => {

      //Get notes saved in storage
      this.storage.get('templates').then((templates) => {

        //set only this.notes to returned val if values stored
        if(templates != null) {
          this.templates = templates;
        }

        //check if data loaded or not
        this.loaded = true;
        resolve(true);
      });

    });

  }
...

The idea was to use ngFor to iterate through the array and add each existing template as an option in the ion-select, however I keep getting problems with it
This is the HTML snippet

  </ion-item>
             <ion-item>
               <ion-label>Load template</ion-label>
               <ion-select> 
                 <ion-option *ngfor = "let item of templates;">
                   {{templates}}
                  </ion-option>  
               </ion-select>
             </ion-item>

And this is the code in the JS file

export class NewTransactionPage {
 ...
  templates: Template[];
...
 constructor( public formBuilder: FormBuilder,   public toastCtrl: ToastController, public navCtrl: NavController, public navParams: NavParams, public userService: User, public transferServicerino: TransferService, public templateServicerino: TemplateService) {
 ...
    this.templates = templateServicerino.getAllTemplates();
...

Thank you in advance for your help

Posts: 1

Participants: 1

Read full topic

Insert object into array, refresh view of ngFor list, then scroll to new object's element in list?

$
0
0

@mlynch wrote:

I have an HTML page using ngFor to show a list of <div> elements for each object in an array. Each <div> has a unique id that is generated using that object’s index in the array. I’ve tested this and it works.

Now, I have a button that triggers a function to insert a new object into the array. Once that new object is rendered in the HTML, I want the page to auto-scroll to it. I’m running into an issue where the function inserts the object, then tries to scroll to it before Angular has refreshed the view to render the <div>.

So how can I write a function to:

  1. Insert the object into the array
  2. AWAIT the refresh the view so that it appears in the HTML
  3. THEN scroll to that HTML element

Posts: 1

Participants: 1

Read full topic

Ionic 3 Audio ouput to earpiece

$
0
0

@segvr wrote:

Hey there,

i´m using the media plugin to play audio. Is it possible to select the earpiece as output to play audio?

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>