Quantcast
Channel: Ionic Forum - Latest topics
Viewing all 71531 articles
Browse latest View live

How to create an array from user selected objects in IONIC 3?

$
0
0

@harshm90 wrote:

Hello Guys,

I am trying to differentiate the selected array I get from user but i am unable to separate it . It just come together.

Like i am trying to get it like below image

30%20PM

but this is what i am getting shown in below image

58%20PM

in my ts file


sub_item: any = [{
    subcat_id: "",
    value: "",
    qty: ""
  }];

constructor(...){
..
}

submitbtn(){
this.sub_item.push({
      subcat_id: this.sub_id,
      qty: this.quantity,
      value: this.addonId + "|" + this.addOnPrice + "|" + this.selectedAddOn
    });
}

Please Help how can i achieve this?

Posts: 1

Participants: 1

Read full topic


How to use deeplinks to open gmail With Ionic 4

$
0
0

@sushantr wrote:

Hello,
I’m trying to open gmail app through my ionic application. Can anyone please guide me how to use deeplinks to open gmail app

Posts: 1

Participants: 1

Read full topic

Do I have to bother about browser compatibility?

$
0
0

@sebay wrote:

I want to use the Web Audio API in my ionic app. Unfortunately, the browser compatibility is really bad and I am worrying that my application will not work on lower android devices.
So:

How “up to date” is the ionic web view or does it fully support e.g. the Web Audio API?
Will the crosswalk plugin solve the issue?
Do you know about any considerable thoughts concerning or links this topic?

Thanks for reading this post!
Lookin´ forward to your answers :ok_hand:

Posts: 1

Participants: 1

Read full topic

Create a condition structure that takes the table information

$
0
0

@Ball4ckBR wrote:

I need to make that if the person enters a CEP that is already in the table automatically the other fields will be filled with the information that was placed in this CEP.

home.page.html:

<ion-item>
  <ion-grid>
    <ion-row>
      <ion-col>
        CEP
      </ion-col>
      <ion-col>
        Endereço
      </ion-col>
      <ion-col>
        Cidade
      </ion-col>
      <ion-col>
        UF
      </ion-col>
    </ion-row>
    <ion-row *ngFor="let campo of campos; let i=index">
      <ion-col>
        {{campo.cep}}
      </ion-col>
      <ion-col>
        {{campo.endereco}}
      </ion-col>
      <ion-col>
        {{campo.cidade}}
      </ion-col>
      <ion-col>
        {{campo.uf}}
      </ion-col>
    </ion-row>
  
  </ion-grid>

home.page.ts:

export class HomePage {
  public cep;
  public endereco;
  public cidade;
  public uf;
  public campo;
  public campos =  [{cep: '5555',
  endereco:'99999', cidade: 'Itapeva', uf: 'SP'}
  ];

  
  adicionar():void{
    var campos1 = this.campos.push({cep: this.cep, endereco: this.endereco, cidade: this.cidade, uf: this.uf });
    
 
}
}

Posts: 1

Participants: 1

Read full topic

'Ion-text' is not a known element

$
0
0

@rahjain wrote:

Hi All,
I am trying to use ion-item example as given in https://ionicframework.com/docs/api/item

                <ion-label text-wrap>
                    <ion-text color="primary">
                        <h3>H3 Primary Title</h3>
                    </ion-text>
                    <p>Paragraph line 1</p>
                    <ion-text color="secondary">
                        <p>Paragraph line 2 secondary</p>
                    </ion-text>

But it says -

'ion-text' is not a known element:
1. If 'ion-text' is an Angular component, then verify that it is part of this module.
2. If 'ion-text' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
                <ion-label text-wrap>

                    [ERROR ->]<ion-text color="primary">

                        <h3>H3 Primary Title</h3>
"): ng:///AppModule/Dashboard.html@58:20
'ion-text' is not a known element:
1. If 'ion-text' is an Angular component, then verify that it is part of this module.
2. If 'ion-text' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
                    <p>Paragraph line 1</p>

                    [ERROR ->]<ion-text color="secondary">

Not sure where is the Problem :disappointed_relieved:

below is my ionic info output

Ionic:

   ionic (Ionic CLI)  : 4.6.0 (C:\Users\rahjain\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.10

Cordova:

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

System:

   NodeJS : v10.6.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.1.0
   OS     : Windows 10

What am i doing wrong ?

Posts: 1

Participants: 1

Read full topic

Error when trying to run NPM install

$
0
0

@JamesSee wrote:

I am trying to run npm install in the my project and I keep getting the following error. Any help would be appreciated.

4 warnings and 1 error generated.

make: *** [Release/obj.target/binding/src/binding.o] Error 1

gyp ERR! build error

gyp ERR! stack Error: make failed with exit code: 2

gyp ERR! stack at ChildProcess.onExit (/Users/jamesseeliger/project/node_modules/ionic/node_modules/ionic-app-lib/node_modules/node-sass/node_modules/node-gyp/lib/build.js:276:23)

gyp ERR! stack at ChildProcess.emit (events.js:197:13)

gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:254:12)

gyp ERR! System Darwin 18.2.0

gyp ERR! command “/usr/local/bin/node” “/Users/jamesseeliger/project/node_modules/ionic/node_modules/ionic-app-lib/node_modules/node-sass/node_modules/node-gyp/bin/node-gyp.js” “rebuild” “–verbose” “–libsass_ext=” “–libsass_cflags=” “–libsass_ldflags=” “–libsass_library=”

gyp ERR! cwd /Users/jamesseeliger/project/node_modules/ionic/node_modules/ionic-app-lib/node_modules/node-sass

gyp ERR! node -v v11.12.0

gyp ERR! node-gyp -v v3.3.1

gyp ERR! not ok

Build failed

npm WARN acorn-dynamic-import@4.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.

npm WARN karma-chai@0.1.0 requires a peer of chai@* but none is installed. You must install peer dependencies yourself.

npm WARN karma-mocha@0.1.10 requires a peer of mocha@* but none is installed. You must install peer dependencies yourself.

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! node-sass@3.8.0 postinstall: node scripts/build.js

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the node-sass@3.8.0 postinstall script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/jamesseeliger/.npm/_logs/2019-03-23T22_22_51_901Z-debug.log

Posts: 1

Participants: 1

Read full topic

Android@~7.1.4 ENOENT: no such file or directory,

$
0
0

@lunneyd wrote:

It was building correctly and all of a sudden now get the error

ENOENT: no such file or directory …platforms/android/AndroidManifest.xml’

Any ideas what to do as can not downgrade to 6.4

Posts: 1

Participants: 1

Read full topic

Ion-toggle databinding not shows state after load

$
0
0

@8bhsolutions wrote:

ion-toggle always shows false state on page load, then will toggle to the ngModel databinding value.
Where as if it checked property is bound, and the status is shown correctly on load.

HTML

Toggle slide after load no binding

Typescript

public ngModelState: boolean;
public checkedState: boolean;

constructor(public navCtrl: NavController) {
    this.ngModelState = true;
    this.checkedState = true;
}

How do I get the 2-way data binding to load the view correctly?

Posts: 1

Participants: 1

Read full topic


How we select data from different page and then save in our database in ionic

$
0
0

@FK2193 wrote:

I have four pages first add patient then add medicine and then add schedule and last create a reminder because they all are related to each other. I want to add data in the database in the schedule page, so how can we navigate all data using checkbox and or push the data into schedule page and than add it into the database.

*Grammar Mistake

Posts: 1

Participants: 1

Read full topic

Ionic 4 - 2-way binding to html table

$
0
0

@smbu wrote:

Hi all,

I want to do some 2-way binding to an HTML table in an ion-grid. When clicked on a cell I use the Wheel selecter plugin to change the data in the cell. All is working except the value changes in every ion-row, not only the cell that was clicked on. So I guess I should put somewhere a row index or something but can not really figure what/where.

This is the code so far:

html

<ion-content>
  <ion-grid>
    <ion-row *ngFor="let name of names; let idx = index;">
      <div id='header' class="table-header">
        <div align="center">
          <p style="font-size: 14px; color: var(--ion-color-light); margin-bottom: 5px;"> Title1 </p>
          <p style="font-size: 20px; color: var(--ion-color-light); font-weight: bold; margin-top: 0px;"> {{name.name}}
          </p>
        </div>
        <div align="center">
          <p style="font-size: 14px; color: var(--ion-color-light);margin-bottom: 5px;"> Title 2 </p>
          <p style="font-size: 20px; color: var(--ion-color-light); font-weight: bold; margin-top: 0px;">
            {{name.total}} </p>
        </div>
      </div>
      <div class="container">
        <table id="myTable">
          <thead>
            <tr align="center">
              <th>subject 1</th>
              <th>subject 2</th>
              <th>subject 3</th>
              <th>subject 4</th>
              <th>subject 5</th>
              <th>subject 6</th>
              <th>subject 7</th>
              <th>subject 8</th>
              <th>subject 9</th>
              <th>subject 10</th>
            </tr>
          </thead>
          <tbody>
            <tr align="center">
              <td (click)="select_1(name.name,idx)"><ion-input [(ngModel)]="id_1" readonly="true"></ion-input></td>
              <td (click)="select_2(name.name,idx)"><ion-input [(ngModel)]="id_2" readonly="true"></ion-input></td>
              <td (click)="select_3(name.name,idx)"><ion-input [(ngModel)]="id_3" readonly="true"></ion-input></td>
              <td (click)="select_4(name.name,idx)"><ion-input [(ngModel)]="id_4" readonly="true"></ion-input></td>
              <td (click)="select_5(name.name,idx)"><ion-input [(ngModel)]="id_5" readonly="true"></ion-input></td>
              <td (click)="select_6(name.name,idx)"><ion-input [(ngModel)]="id_6" readonly="true"></ion-input></td>
              <td (click)="select_7(name.name,idx)"><ion-input [(ngModel)]="id_7" readonly="true"></ion-input></td>
              <td (click)="select_8(name.name,idx)"><ion-input [(ngModel)]="id_8" readonly="true"></ion-input></td>
              <td >{{name.time}}</td>
              <td (click)="select_10(name.name,idx)"><ion-input [(ngModel)]="id_10" readonly="true"></ion-input></td>
            </tr>
          </tbody>
        </table>
      </div>
    </ion-row>
  </ion-grid>
</ion-content>

TS code (1 function, all are pretty similar)

select_1(val1,idx) {
    console.log(val1,idx);
    this.selector.show({
      title: "Choose hours, minutes",
      items: [this.jsonData.hours, this.jsonData.minutes],
      positiveButtonText: "Confirm",
      negativeButtonText: "Cancel",
      theme: "dark",
    }).then(
      result => {
        this.timeresult = result[0].description + ':' + result[1].description;
       this.id_1 = this.timeresult;
      },
      err => console.log('Error: ', err)
    );
  }

What do I need to change so only the chosen cell get the new value ?

Thanks

Posts: 1

Participants: 1

Read full topic

When i select data from ion-select it will show ion-list that number of time

Ionic 4 screen not scroll up when key board appears

$
0
0

@prabhashi1 wrote:

Hi,

I’m a beginner to ionic frame work and i’m working on an app which has register page. In that Signup page user has to enter details in ion-input fields. but in my case when the key board scrolls up the content is not scrolling. and user can’t see the ion-input fields which appears in the bottom of the page.

Posts: 1

Participants: 1

Read full topic

Ionic 4 Search Bar

$
0
0

@atkca wrote:

Hi all,
I am new yet for ionic. I will design mobile app for my mobile application development lesson. But I have a problem. I need search bar working with firebase for ionic 4. I found How can I do search bar but I didn’t find with firebase. There are some videos on Youtube but they didn’t work. Can you help me, please?

Posts: 1

Participants: 1

Read full topic

Responsive input sizes ionic-v4

$
0
0

@noonestopsme wrote:

Hello All,
Is there any responsive input size functionality on ionic-4 which exists at bootstrap 4?


Thanks in advance.

Posts: 1

Participants: 1

Read full topic

Native Plugins: Cordova vs Ionic Native

$
0
0

@LacOniC wrote:

In native docs, installation is like that:

ionic cordova plugin add cordova-plugin-appavailability
npm install @ionic-native/app-availability

I thought they are optional. So i run only “npm install @ionic-native/app-availability” and it work on local (web). But i wonder anout, Is Cordova necessary for real device or is it an alternative?

Thanks in advance.

Posts: 1

Participants: 1

Read full topic


Failed to login

$
0
0

@tcha-the-great wrote:

i have tried to use ionic cordova resources in order to use my icon and splash but when i enterd by email and password it return message wrong username or password while i can be able to login in dashboard.
this is ionic info result

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

global packages:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)

local packages:

@ionic/app-scripts : 3.2.2-201901242027-201901242027
Cordova Platforms  : android 7.1.4
Ionic Framework    : ionic-angular 3.8.0

System:

Android SDK Tools : 26.1.1
Node              : v10.15.1
npm               : 6.8.0
OS                : Windows 7

Environment Variables:

ANDROID_HOME : C:\Users\chief\AppData\Local\Android\sdk

Misc:

backend : pro

Posts: 1

Participants: 1

Read full topic

Unable to play recorded with MediaCapture.captureVideo

$
0
0

@obaqueiro1 wrote:

I have tried everything I can think of, and followed a lot of the proposed solutions without success. This is the problem: When trying to capture a video using MediaCapture and then try to play it in a tag, the video just does not load. The code snippet is:

this.mediaCapture.captureVideo({limit: 1, duration: 30}).then (
        (data: MediaFile[]) => {
          console.log(data);
          this.videoPath = data[0].fullPath;
          this.validRecording = true;
          this.spinnerVisible = false;

          this.validRecording = true;
           let fileName = this.webView.convertFileSrc(this.videoPath);          
            document.getElementById('videoSource'+this.videoId).setAttribute('src', 
             fileName );
            this.video.load();
            this.video.play();

         } ).catch(err => {
        console.log(err);
}

I am using webview 4, which contains convertFileSrc.
As a result of convertFileSrc i get a 'http://localhost/_app_file/storage/emulated/DCIM/camera/20190324_1123.mp4" url
On the step when the video is tried to be played in the tag, I am getting a 404 (OK) error (not found??). But when looking at the phone, the video is recorded correctly.

Other dependencies I’ve got installed:

“dependencies”: {
@angular/animations”: “5.2.11”,
@angular/common”: “5.2.11”,
@angular/compiler”: “5.2.11”,
@angular/compiler-cli”: “5.2.11”,
@angular/core”: “5.2.11”,
@angular/forms”: “5.2.11”,
@angular/http”: “5.2.11”,
@angular/platform-browser”: “5.2.11”,
@angular/platform-browser-dynamic”: “5.2.11”,
@ionic-native/camera”: “~5.2.0”,
@ionic-native/core”: “~5.2.0”,
@ionic-native/file”: “~5.2.0”,
@ionic-native/ionic-webview”: “^5.2.0”,
@ionic-native/media-capture”: “~5.2.0”,
@ionic-native/splash-screen”: “~5.2.0”,
@ionic-native/status-bar”: “~5.2.0”,
@ionic-native/video-player”: “^5.2.0”,
@ionic/storage”: “2.1.3”,
@types/node”: “^11.11.3”,
“cordova”: “^8.0.0”,
“cordova-android”: “7.1.4”,
“cordova-browser”: “5.0.4”,
“cordova-plugin-camera”: “^4.0.3”,
“cordova-plugin-device”: “^2.0.2”,
“cordova-plugin-file”: “^6.0.1”,
“cordova-plugin-ionic-keyboard”: “^2.1.3”,
“cordova-plugin-ionic-webview”: “4.0.0”,
“cordova-plugin-media-capture”: “^3.0.2”,
“cordova-plugin-splashscreen”: “^5.0.2”,
“cordova-plugin-statusbar”: “2.4.2”,

Please help!

Posts: 2

Participants: 1

Read full topic

Human readable date with Angular

$
0
0

@ahmadt wrote:

Hello

Forgive me if this is a simple question, I’m new to Ionic 4 and to Angular

I’m receiving a datetime from API in this format (2019-03-09 15:47:18), I know this is a UTC timezone, the question how can I display it in the user local timezone with Human readable format?

<ion-note class=“ion-float-end”>{{notification.created_at | date:‘full’}}</ion-note>

This will display the date but in UTC format and I couldn’t find any option with “angular date” to display it

if you can please guide me, I’m still learning Ionic with Angular.

Thanks

Posts: 1

Participants: 1

Read full topic

[Ionic 4] Page background image with 100% screen width?

$
0
0

@ahmadt wrote:

Hello Experts :slight_smile:

I spend almost five days trying to figure this out.

I have a page that I want to set an image for the background (fixed image) and to support all type of screens.

I want the width of the image to match the screen width (and 50% of screen height), and make the toolbar transparent.

Is such a thing is even possible with Ionic? All resources on the internet are either old or don’t work

Posts: 1

Participants: 1

Read full topic

Source and destination must not be the same

$
0
0

@Dovel wrote:

Currently the builds with Cordova-Android 8.0.0 will randomly fail (especially on Windows systems).

The reason is, that Cordova uses fs-extra now for file operations like copy.
See Change-Log and the issue

In a nutshell:
fs-extra checks the pathes of file / directory before copy. It sounds great. But the check-method uses the Node fs Inode value to verify it’s the same file. See source code
This is not the best idea. Why?

  • They uses the number type of the value. Not the big-integer. In JavaScript the maximum safe integer is 53-bit. Node fs supports big-integer since version 10.4. see docs. Inode can be a huge value. See the difference between number and big-integer
  • The Inode number is an integer unique to the volume upon which it is stored. This means, you maybe can’t copy a file between volumes.

Here’s the active issue on Github
Please support it, if you want to keep building Apps with Ionic (Cordova).
This is a common issue on the latest Cordova version.

It really often breaks the build.

Posts: 1

Participants: 1

Read full topic

Viewing all 71531 articles
Browse latest View live


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