@lily28 wrote:

I created an expandable list with checkbox, and wish to save the value of the checked box in mysql using php. I am totally new with php and mysql so I’m clueless what to do next.

This is the expandable list

I stored the parent and children list in information.json

{
    "items": [
        {
            "name": "Color",
            "children": [
                { "name": "Black" },
                { "name": "White" },
                { "name": "Yellow" }
            ]
        },
       {
            "name": "Size",
            "children": [
                { "name": "Large" },
                { "name": "Small" }
            ]
        },
        {
            "name": "Shape",
            "children": [
                { "name": "Circle" },
                { "name": "Square" }
            ]
        },
        {
            "name": "Coupons",
            "children": []
        }
    ]
}

The parent list (Color, Size, Shape, Coupons) was included in home.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      List
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

<ion-list *ngFor="let item of information; let i = index;" class="accordion-list" lines="full">
  <ion-item tappable (click)="toggleSection(i)" [ngClass]="{'section-active': item.open, 'section-inactive': !item.open}">
    <ion-icon slot="end" name="arrow-forward" *ngIf="!item.open"></ion-icon>
    <ion-icon slot="end" name="arrow-down" *ngIf="item.open"></ion-icon>
    <ion-label class="label">
      {{item.name}}
    </ion-label>
  </ion-item>

  <div *ngIf="item.children && item.open">

    <app-product *ngFor="let child of item.children" [product]="child"></app-product>

  </div>

  <p *ngIf="item.children.length == 0 && item.open" text-center>Sorry, nothing in here!</p>
</ion-list>

</ion-content>

the tag selector is to perform the expandable list from the new created component, product.component.html

<ion-item lines="none">
  <ion-label>{{product.name}}</ion-label>
  <ion-checkbox slot="end" (click)="buyItem(product)"></ion-checkbox>
</ion-item>

Can anyone guide me what to do next to enable the checked values store in mysql ?

Posts: 1

Participants: 1

Read full topic

@javabek wrote:

(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)

Posts: 1

Participants: 1

Read full topic

@leonardofmed wrote:

I want to dynamically activate some checkboxes when the user enters the page. For this I am saving the IDs of the HTML checkbox elements in a service. When the user enters the page, this service is accessed and returns an array with these IDs. The active elements are checked in each loop.

this.platform.ready().then(() => {
	let checboxState = this.service.checboxState;
	if (checboxState !== undefined && checboxState.length > 0) {
		checboxState.forEach(checbox => {
			let element = document.getElementById(checbox.id) as HTMLInputElement;
			element.checked = true;
		});
	}
});

But I’m getting this error:

Uncaught (in promise): TypeError: Cannot set property ‘checked’ of null

Which can be a indicator that Javascript function is firing before DOM is loaded. If that is the case, why platform.ready() isn’t working? I tried also with:

• document.addEventListener("DOMContentLoaded",() => {}
• window.onload = () => {}

but no success.

---

I managed to make the function work by adding a setTimeout() before the function, so how do I correctly wait the HTML elements to load before firing the JS function?

Posts: 1

Participants: 1

Read full topic

@cr93 wrote:

I am running ionic cordova build android when trying to build and keep getting,

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ‘:transformClassesWithPreJackPackagedLibrariesForArmv7Debug’.

java.lang.NullPointerException (no error message)

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 23.038 secs
Error: /Users/myUser/projects/projectName/platforms/android/gradlew: Command failed with exit code 1 Error output:
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.

My Enviroment

cli packages: (/Users/userName/projects/projectName/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.0

System:

    Node : v8.12.0
    npm  : 6.4.1 
    OS   : macOS

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

My Gradle File

/*
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
*/

apply plugin: 'com.android.application'

buildscript {
    repositories {
        jcenter()
        maven {
            url "https://maven.google.com"
        }
    }

    // Switch the Android Gradle plugin version requirement depending on the
    // installed version of Gradle. This dependency is documented at
    // http://tools.android.com/tech-docs/new-build-system/version-compatibility
    // and https://issues.apache.org/jira/browse/CB-8143
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.3'
    }
}

// Allow plugins to declare Maven dependencies via build-extras.gradle.
allprojects {
    repositories {
        jcenter()
        maven {
            url "https://maven.google.com"
        }
    }
}

task wrapper(type: Wrapper) {
    gradleVersion = '2.14.1'
}

// Configuration properties. Set these via environment variables, build-extras.gradle, or gradle.properties.
// Refer to: http://www.gradle.org/docs/current/userguide/tutorial_this_and_that.html
ext {
    apply from: 'CordovaLib/cordova.gradle'
    // The value for android.compileSdkVersion.
    if (!project.hasProperty('cdvCompileSdkVersion')) {
        cdvCompileSdkVersion = null;
    }
    // The value for android.buildToolsVersion.
    if (!project.hasProperty('cdvBuildToolsVersion')) {
        cdvBuildToolsVersion = null;
    }
    // Sets the versionCode to the given value.
    if (!project.hasProperty('cdvVersionCode')) {
        cdvVersionCode = null
    }
    // Sets the minSdkVersion to the given value.
    if (!project.hasProperty('cdvMinSdkVersion')) {
        cdvMinSdkVersion = null
    }
    // Whether to build architecture-specific APKs.
    if (!project.hasProperty('cdvBuildMultipleApks')) {
        cdvBuildMultipleApks = null
    }
    // .properties files to use for release signing.
    if (!project.hasProperty('cdvReleaseSigningPropertiesFile')) {
        cdvReleaseSigningPropertiesFile = null
    }
    // .properties files to use for debug signing.
    if (!project.hasProperty('cdvDebugSigningPropertiesFile')) {
        cdvDebugSigningPropertiesFile = null
    }
    // Set by build.js script.
    if (!project.hasProperty('cdvBuildArch')) {
        cdvBuildArch = null
    }

    // Plugin gradle extensions can append to this to have code run at the end.
    cdvPluginPostBuildExtras = []
}

// PLUGIN GRADLE EXTENSIONS START
apply from: "com.ejgallo.clover/pos-plugin.gradle"
apply from: "cordova-android-support-gradle-release/pos-cordova-android-support-gradle-release.gradle"
apply from: "cordova-plugin-crosswalk-webview/pos-xwalk.gradle"
// PLUGIN GRADLE EXTENSIONS END

def hasBuildExtras = file('build-extras.gradle').exists()
if (hasBuildExtras) {
    apply from: 'build-extras.gradle'
}

// Set property defaults after extension .gradle files.
if (ext.cdvCompileSdkVersion == null) {
    ext.cdvCompileSdkVersion = privateHelpers.getProjectTarget()
}
if (ext.cdvBuildToolsVersion == null) {
    ext.cdvBuildToolsVersion = privateHelpers.findLatestInstalledBuildTools()
}
if (ext.cdvDebugSigningPropertiesFile == null && file('debug-signing.properties').exists()) {
    ext.cdvDebugSigningPropertiesFile = 'debug-signing.properties'
}
if (ext.cdvReleaseSigningPropertiesFile == null && file('release-signing.properties').exists()) {
    ext.cdvReleaseSigningPropertiesFile = 'release-signing.properties'
}

// Cast to appropriate types.
ext.cdvBuildMultipleApks = cdvBuildMultipleApks == null ? false : cdvBuildMultipleApks.toBoolean();
ext.cdvMinSdkVersion = cdvMinSdkVersion == null ? null : Integer.parseInt('' + cdvMinSdkVersion)
ext.cdvVersionCode = cdvVersionCode == null ? null : Integer.parseInt('' + cdvVersionCode)

def computeBuildTargetName(debugBuild) {
    def ret = 'assemble'
    if (cdvBuildMultipleApks && cdvBuildArch) {
        def arch = cdvBuildArch == 'arm' ? 'armv7' : cdvBuildArch
        ret += '' + arch.toUpperCase().charAt(0) + arch.substring(1);
    }
    return ret + (debugBuild ? 'Debug' : 'Release')
}

// Make cdvBuild a task that depends on the debug/arch-sepecific task.
task cdvBuildDebug
cdvBuildDebug.dependsOn {
    return computeBuildTargetName(true)
}

task cdvBuildRelease
cdvBuildRelease.dependsOn {
    return computeBuildTargetName(false)
}

task cdvPrintProps << {
    println('cdvCompileSdkVersion=' + cdvCompileSdkVersion)
    println('cdvBuildToolsVersion=' + cdvBuildToolsVersion)
    println('cdvVersionCode=' + cdvVersionCode)
    println('cdvMinSdkVersion=' + cdvMinSdkVersion)
    println('cdvBuildMultipleApks=' + cdvBuildMultipleApks)
    println('cdvReleaseSigningPropertiesFile=' + cdvReleaseSigningPropertiesFile)
    println('cdvDebugSigningPropertiesFile=' + cdvDebugSigningPropertiesFile)
    println('cdvBuildArch=' + cdvBuildArch)
    println('computedVersionCode=' + android.defaultConfig.versionCode)
    android.productFlavors.each { flavor ->
        println('computed' + flavor.name.capitalize() + 'VersionCode=' + flavor.versionCode)
    }
}

android {
    sourceSets {
        main {
            manifest.srcFile 'AndroidManifest.xml'
            java.srcDirs = ['src']
            resources.srcDirs = ['src']
            aidl.srcDirs = ['src']
            renderscript.srcDirs = ['src']
            res.srcDirs = ['res']
            assets.srcDirs = ['assets']
            jniLibs.srcDirs = ['libs']
        }
    }

    defaultConfig {
        versionCode cdvVersionCode ?: new BigInteger("" + privateHelpers.extractIntFromManifest("versionCode"))
        applicationId privateHelpers.extractStringFromManifest("package")

        if (cdvMinSdkVersion != null) {
            minSdkVersion cdvMinSdkVersion
        }
    }

    lintOptions {
      abortOnError false;
    }

    compileSdkVersion cdvCompileSdkVersion
    buildToolsVersion cdvBuildToolsVersion

    if (Boolean.valueOf(cdvBuildMultipleApks)) {
        productFlavors {
            armv7 {
                versionCode defaultConfig.versionCode*10 + 2
                ndk {
                    abiFilters "armeabi-v7a", ""
                }
            }
            x86 {
                versionCode defaultConfig.versionCode*10 + 4
                ndk {
                    abiFilters "x86", ""
                }
            }
            all {
                ndk {
                    abiFilters "all", ""
                }
            }
        }
    }
    /*

    ELSE NOTHING! DON'T MESS WITH THE VERSION CODE IF YOU DON'T HAVE TO!

    else if (!cdvVersionCode) {
      def minSdkVersion = cdvMinSdkVersion ?: privateHelpers.extractIntFromManifest("minSdkVersion")
      // Vary versionCode by the two most common API levels:
      // 14 is ICS, which is the lowest API level for many apps.
      // 20 is Lollipop, which is the lowest API level for the updatable system webview.
      if (minSdkVersion >= 20) {
        defaultConfig.versionCode += 9
      } else if (minSdkVersion >= 14) {
        defaultConfig.versionCode += 8
      }
    }
    */

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_6
        targetCompatibility JavaVersion.VERSION_1_6
    }

    if (cdvReleaseSigningPropertiesFile) {
        signingConfigs {
            release {
                // These must be set or Gradle will complain (even if they are overridden).
                keyAlias = ""
                keyPassword = "__unset" // And these must be set to non-empty in order to have the signing step added to the task graph.
                storeFile = null
                storePassword = "__unset"
            }
        }
        buildTypes {
            release {
                signingConfig signingConfigs.release
            }
        }
        addSigningProps(cdvReleaseSigningPropertiesFile, signingConfigs.release)
    }
    if (cdvDebugSigningPropertiesFile) {
        addSigningProps(cdvDebugSigningPropertiesFile, signingConfigs.debug)
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: '*.jar')
    // SUB-PROJECT DEPENDENCIES START
    debugCompile(project(path: "CordovaLib", configuration: "debug"))
    releaseCompile(project(path: "CordovaLib", configuration: "release"))
    // SUB-PROJECT DEPENDENCIES END
}

def promptForReleaseKeyPassword() {
    if (!cdvReleaseSigningPropertiesFile) {
        return;
    }
    if ('__unset'.equals(android.signingConfigs.release.storePassword)) {
        android.signingConfigs.release.storePassword = privateHelpers.promptForPassword('Enter key store password: ')
    }
    if ('__unset'.equals(android.signingConfigs.release.keyPassword)) {
        android.signingConfigs.release.keyPassword = privateHelpers.promptForPassword('Enter key password: ');
    }
}

gradle.taskGraph.whenReady { taskGraph ->
    taskGraph.getAllTasks().each() { task ->
        if (task.name == 'validateReleaseSigning' || task.name == 'validateSigningRelease') {
            promptForReleaseKeyPassword()
        }
    }
}

def addSigningProps(propsFilePath, signingConfig) {
    def propsFile = file(propsFilePath)
    def props = new Properties()
    propsFile.withReader { reader ->
        props.load(reader)
    }

    def storeFile = new File(props.get('key.store') ?: privateHelpers.ensureValueExists(propsFilePath, props, 'storeFile'))
    if (!storeFile.isAbsolute()) {
        storeFile = RelativePath.parse(true, storeFile.toString()).getFile(propsFile.getParentFile())
    }
    if (!storeFile.exists()) {
        throw new FileNotFoundException('Keystore file does not exist: ' + storeFile.getAbsolutePath())
    }
    signingConfig.keyAlias = props.get('key.alias') ?: privateHelpers.ensureValueExists(propsFilePath, props, 'keyAlias')
    signingConfig.keyPassword = props.get('keyPassword', props.get('key.alias.password', signingConfig.keyPassword))
    signingConfig.storeFile = storeFile
    signingConfig.storePassword = props.get('storePassword', props.get('key.store.password', signingConfig.storePassword))
    def storeType = props.get('storeType', props.get('key.store.type', ''))
    if (!storeType) {
        def filename = storeFile.getName().toLowerCase();
        if (filename.endsWith('.p12') || filename.endsWith('.pfx')) {
            storeType = 'pkcs12'
        } else {
            storeType = signingConfig.storeType // "jks"
        }
    }
    signingConfig.storeType = storeType
}

for (def func : cdvPluginPostBuildExtras) {
    func()
}

// This can be defined within build-extras.gradle as:
//     ext.postBuildExtras = { ... code here ... }
if (hasProperty('postBuildExtras')) {
    postBuildExtras()
}

Posts: 1

Participants: 1

Read full topic

@khaled_veto wrote:

hi , anyone use fastlane with ionic 4 , specially fastlane screenshot ?
i got this error :

image1099×306 98 KB

any help ?

Posts: 1

Participants: 1

Read full topic

@mariansbr wrote:

Hi everybody.
I’m an ionic beginner and i have the following problem. I have used two ion-infinity-scrolls and I would need the scrolls to work on each list separately. It is possible?
I found an example of where it works. https://codepen.io/priand/pen/PzYbZG
but I can’t rewrite it in TS.

I’m sorry for my English and thank you for advice.

My code:

home.page.html

homepage.ts

import { Component, ViewChild } from ‘@angular/core’;
import { IonInfiniteScroll } from ‘@ionic/angular’;

@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’],
})

export class HomePage {

items = ;
itemsData = ;
items2 = ;
itemsData2 = ;

constructor() {

for (let i = 0; i < 50; i++) {
  this.itemsData.push("Menu " + this.itemsData.length);
}

for (let i = 0; i < 75; i++) {
  this.itemsData2.push("Item " + this.itemsData2.length);
}

this.fillMenu();
this.fillItem();

}

fillMenu() {
let iTo = 25;
if (this.itemsData.length < iTo) { iTo = this.itemsData.length }
for (let i = 0; i < iTo; i++) {
this.items.push(this.itemsData[i]);
}
}

fillItem() {
let iTo = 25;
if (this.itemsData2.length < iTo) { iTo = this.itemsData2.length }
for (let i = 0; i < iTo; i++) {
this.items2.push(this.itemsData2[i]);
}
}

doInfinite(event) {
setTimeout(() => {
console.log(‘Done’);
const ii = this.items.length;
for (let i = ii; i < (ii + 25); i++) {
if (this.items.length < this.itemsData.length) {
this.items.push(this.itemsData[i]);
}
}
event.target.complete();
if (this.items.length == this.itemsData.length) {
event.target.disabled = true;
}
}, 250);
}

doInfinite2(event) {
setTimeout(() => {
console.log(‘Done’);
const ii = this.items2.length;
for (let i = ii; i < (ii + 25); i++) {
if (this.items2.length < this.itemsData2.length) {
this.items2.push(this.itemsData2[i]);
}
}
event.target.complete();
if (this.items2.length == this.itemsData2.length) {
event.target.disabled = true;
}
}, 250);
}
}

Posts: 1

Participants: 1

Read full topic

@blandich wrote:

Hi,

So I need to present a toast after a clicking a button in my alert dialogue box, but I keep getting errors as I don’t know how to implement nested async methods. I tried the code below and I keep getting errors. Someone help me.

Thanks!

async addNewRoom(){
const alert = await this.alertController.create({
header: ‘Add New Room’,
message: ‘What type of room would you like to add?’,
buttons: [
{
text: ‘Common’,
handler: () => {
this.roomService.addGenericRoom(this.hcf_id).subscribe(e => {
console.log(e);
});
const toast = await this.toastController.create({
message: ‘A generic common room has been added.’,
duration: 2000,
showCloseButton: true
});
toast.present();
}
},
{
text: ‘Functional’,
handler: () => {
this.roomService.addGenericRoom(this.hcf_id).subscribe(e => {
console.log(e);
});
const toast = await this.toastController.create({
message: ‘A generic functional room has been added.’,
duration: 2000,
showCloseButton: true
});
toast.present();
}
},
{
text: ‘Cancel’,
role: ‘cancel’
}]
});
alert.present();
}

Posts: 1

Participants: 1

Read full topic

@AnonymousIndian wrote:

<ion-col size="6" *ngFor="let mylocation of currentLocation; let i=index">
    <img src={{mylocation.img}} />
    <ion-item lines="none">
      <p style="margin-inline-start: unset; font-weight: bold;font-size: 12px;">{{{{mylocation.name}}</p>
      <ion-icon *ngIf="!joinRequest" (click)="sendRequest(i)" slot="end" name="person-add"></ion-icon>
      <ion-icon slot="end" *ngIf="joinRequest" name="checkmark-circle"></ion-icon>
    </ion-item>
  </ion-col>

Posts: 1

Participants: 1

Read full topic

@abdosaeed wrote:

Hi, i am using ngx-translate to make the app with multiple language, ion-sildes work prefect when app started from the first to last step, but when changing app language the content is hidden, i thing ion-slides does not reload their content, next video describle the ploblem

Posts: 1

Participants: 1

Read full topic

@NthabyMogoboya wrote:

I want to insert data into a database using http in ionic. How can i do it?

Posts: 1

Participants: 1

Read full topic

@dmatthams wrote:

Hello all, I’m trying to get the new style of iOS modal popup shown in the Ionic 5 announcement (https://ionicframework.com/blog/announcing-ionic-5/) with the pseudo 3d effect.

I have swipeToClose set to true, as well as defining a presentingElement, but still get the old-style modal on iOS.

  async presentModal() {
    const presentingElement = await this.modalController.getTop();
    const modal = await this.modalController.create({
      component: ModalPage,
      swipeToClose: true,
      presentingElement: presentingElement
    });
    return await modal.present();
  }

What am I missing?

Posts: 2

Participants: 1

Read full topic

@UCN wrote:

I have installed ionic react with the default tabs, I did not add any package. When I launch the app I receive this error:

The types returned by 'render()' are incompatible between these types.
[react-scripts]     Type 'ReactNode' is not assignable to type 'false | Element | null'.
[react-scripts]       Type 'undefined' is not assignable to type 'false | Element | null'.  TS2605
[react-scripts]     41 |         <IonRouterOutlet>
[react-scripts]     42 |         <React.Fragment>
[react-scripts]   > 43 |           <Route path="/tab1" component={Tab1} exact={true} />
[react-scripts]        |           ^
[react-scripts]     44 |           <Route path="/tab2" component={Tab2} exact={true} />
[react-scripts]     45 |           <Route path="/tab3" component={Tab3} />
[react-scripts]     45 |           <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />

In VS Route and Redirect is highlighting as if there is syntax error, and when hovered it shows this:

(alias) class Route<T extends RouteProps = RouteProps>
import Route
'Route' cannot be used as a JSX component.
  Its instance type 'Route<{ path: "/tab1"; component: FC<{}>; exact: true; }>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'ReactNode' is not assignable to type 'false | Element | null'.
        Type 'undefined' is not assignable to type 'false | Element | null'.ts(2786)

If I comment out this:

        <Route path="/tab1" component={Tab1} exact={true} />
         <Route path="/tab2" component={Tab2} exact={true} />
         <Route path="/tab3" component={Tab3} />
         <Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />

The app launchs. Perhaps the problem is with the Route

I have opened an Issue on github (https://github.com/ionic-team/ionic/issues/21109) , but I was advised to get help here. Any help?

Posts: 1

Participants: 1

Read full topic

@alexcandy91 wrote:

Hello,
I have a problem with the IONIC plugin NativeAudio.
I’m using IONIC with Capacitor with this configuration

Ionic:

   Ionic CLI                     : 5.4.16 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.1
   @capacitor/core : 2.0.1

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.0.0) : 0.2.8

System:

   NodeJS : v13.11.0 (/usr/local/Cellar/node/13.11.0/bin/node)
   npm    : 6.13.7
   OS     : macOS Catalina

I install the Plugin as described in the DOC.

This is my sound service.

import {Injectable} from '@angular/core';
import {Platform} from '@ionic/angular';
import {NativeAudio} from '@ionic-native/native-audio/ngx';

const INCREASE = 'increase_audio';
const DECREASE = 'decrease_audio';


@Injectable({
  providedIn: 'root'
})
export class SoundService {
  
  private isSoundPlaying: boolean;
  private isAudioAvailable: boolean;
  
  constructor(
    private nativeAudio: NativeAudio,
    private platform: Platform
  ) {
    this.isSoundPlaying = false;
    this.isAudioAvailable = false;
    if (platform.is('hybrid')) {
      this.isAudioAvailable = true;
      this.nativeAudio.preloadSimple(INCREASE, 'sounds/increase.mp3').catch();
      this.nativeAudio.preloadSimple(DECREASE, 'sounds/decrease.mp3').catch();
    }
  }
  
  playIncrease() {
    this.playSound(INCREASE);
  }
  
  playDecrease() {
    this.playSound(DECREASE);
  }
  
  private playSound(soundId: string) {
    this.isSoundPlaying = true;
    if (!this.isSoundPlaying && this.isAudioAvailable) {
      this.nativeAudio.play(soundId).then(() => {
        this.isSoundPlaying = false;
      }, () => {
        this.isSoundPlaying = false;
      });
    }
  }
}

I inject it in a “controller” where I want to play the little sound.
I don’t inject anything in the app module, because is not reported in the documentation but I also try to put NativeAudio in the provider array but it still not working.

The error is : NullInjectorError: StaticInjectorError(AppModule)[NativeAudio]

As you can see in the image in attached.

Screenshot 2020-04-23 at 15.34.231480×668 152 KB

Thanks to all can help me, regards

Posts: 4

Participants: 2

Read full topic

@vanpevi wrote:

Hi,
I would like to create a form where the form fields are named in the ngOnInit based on data id that arrives in the same ngOnInit:
I would like to use the id in the names of the fields… but no idea how to achieve that?!
Thanks for reading,
V

ngOnInit() {

this.customers = [
{“id”:“1”,“name”:“name1”}
,{“id”:“2”,“name”:“name2”}
,{“id”:“3”,“name”:“name3”}
,{“id”:“4”,“name”:“name4”} ];
this.validations_form = this.formBuilder.group({
amountwater_amt1 : new FormControl(’’,Validators.required)
,amountwater_amt2 : new FormControl(’’,Validators.required)
,amountwater_amt3 : new FormControl(’’,Validators.required)
,amountwater_amt4 : new FormControl(’’,Validators.required)
,amountwine_amt1 : new FormControl(’’,Validators.required)
,amountwine_amt2 : new FormControl(’’,Validators.required)
,amountwine_amt3 : new FormControl(’’,Validators.required)
,amountwine_amt4 : new FormControl(’’,Validators.required)
…
});

}

Posts: 1

Participants: 1

Read full topic

@Simbaclaw wrote:

Hi everyone,

When using ionic-native calendar, how can I list all events of a specific calendar in android and iOS?

I know iOS has the findAllEventsInNamedCalendar function so that one might be covered, but android only has a listEventsInRange function.

I’m guessing this gets all the events within a specific range from all of the calendars.
What if I wanted to get only the events of a specific calendar, would I have to filter them by hand somehow? Plus I would want to get all of them and not just a specific range.

How would I be able to accomplish this?

Also, I don’t really see a difference between the enterprise version of this plugin and the open source version of this plugin. If I ever did want to go for the enterprise edition, what would that bring me?

Please advice,
Simbaclaws

Posts: 1

Participants: 1

Read full topic

@pimol wrote:

After a while I understood the “splashscreen” in PWA and in Ionic app are two separate concept.
Actually, I had started building an app, but recourse of Google and Apple’s refusal to publish it, I had to switch to a PWA.
The app is a support for local Red Cross subsidiary, but Cupertino and Mountain View are dummy about it, also if this is a pure volunteers’ effort: no COVID related app by independent developers is admitted.
However, we are in hurry, PWA run and we are ready for launch, but…
After the splash of PWA splashscreen disappears as expected, but the screen is white for a few second with a broken-link image; then app become visible. Is that an effect of the splash screen I inserted into the standard app? There is no way ti have the same source for PWA (Firebase hosted) and the (future) standalone apps for Android and iOS?

Ionic info:

Ionic CLI : 6.6.0 (C:\Users\Pietro\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, browser 6.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.0, (and 7 other plugins)

Utility:

cordova-res (update available: 0.13.0) : 0.9.0
native-run (update available: 1.0.0) : 0.3.0

System:

NodeJS : v12.13.1 (C:\Program Files\nodejs\node.exe)
npm : 6.13.2
OS : Windows 10

Pietro

Posts: 1

Participants: 1

Read full topic

@johnmmackey wrote:

I am attempting to use service proxies as described in Service Proxies. However, I cannot get it to work at all. Note that is just browser dev/test - no devices involved. My configuration:

ionic.config.json:

{
  "name": "cgmobile",
  "integrations": {
    "capacitor": {}
  },
  "type": "react",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://avalidhost.net:8090/"
    }
  ]
}

If I try the following:

curl localhost:8100/api/calendar

…or try to fetch the same URL from within my app, I just get the root html index file back. Note that this is a react app - a lot of the examples I can find online are angular… don’t see that matters though.

Configuration:
ionic cli version: 6.6.0
npm version: 6.13.4
node version: 12.15.0

Bits of output from ionic serve:

[react-scripts] ℹ ｢wds｣: Project is running at http://172.31.255.181/
[react-scripts] ℹ ｢wds｣: webpack output is served from 
[react-scripts] ℹ ｢wds｣: Content not from webpack is served from /home/john/Development/ionic/cgmobile/public
[react-scripts] ℹ ｢wds｣: 404s will fallback to /
[react-scripts] Starting the development server...
[react-scripts]


[INFO] Development server running!
       
       Local: http://localhost:8100
       
       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

Dependencies section of package.json:

  "dependencies": {
    "@capacitor/core": "2.0.1",
    "@ionic/react": "^5.0.7",
    "@ionic/react-router": "^5.0.7",
    "@testing-library/jest-dom": "^5.5.0",
    "@testing-library/react": "^10.0.3",
    "@testing-library/user-event": "^10.1.0",
    "@types/jest": "^25.2.1",
    "@types/node": "^13.13.2",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.6",
    "@types/react-router": "^5.1.5",
    "@types/react-router-dom": "^5.1.4",
    "ionicons": "^5.0.1",
    "moment": "^2.24.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "rxjs": "^6.5.5",
    "typescript": "3.8.3",
    "weather-underground-icons": "^1.0.0"
  },

Posts: 1

Participants: 1

Read full topic

@samuelv wrote:

Hello,

I tried all day to debug my app, which work perfectly on browser running, but which doesn’t work on Android Studio.

I have this error message :

Msg: ERROR CONTEXT [object Object]

Which refers to this var :

autocomplete: {input : string,
                 types: string[]};

ngOnInit(){
    this.autocomplete = { input: '', types: ['(regions)'] };
}

If i trie to console.log(autocomplete) it returns ‘undefined’

Do someone know how to fix this error ?

Thanks in advance.

Posts: 1

Participants: 1

Read full topic

@cboudreau wrote:

I only see the use of angular in the docs, I’m wondering if you can use react as well?

Posts: 1

Participants: 1

Read full topic

@YXUN wrote:

Hi guys, so my app is done and I want to add Privacy Policy and Terms of Use into the app. I used an app privacy policy generator and they provide me a full HTML tags code source.

Is there any way I can implement it in my project? because just by copy-paste the exact source code, the project doesn’t display them at all.

Posts: 1

Participants: 1

Read full topic