@HarinderAsr wrote:

Ionic 4 target all platforms, desktop to mobile.
Capacitor: Universal Web Applications

Please provide date-picker for desktop browsers. Or make currently available date-picker scroll-able using mouse wheel (or if you have any work around for this please let me know) for better user experience.

Thank You

Posts: 1

Participants: 1

Read full topic

@AsadAbbasi wrote:

Hi , AOA everyone , can anybody help me , i,m building an ionic app in which i,m showing articles from different news links and other websites using an API. basically it is my FYP and they ask me to add something like i have to check similarity of the articles and remove the same articles from the search result or to show thaat this article is similar to the other… it is urgent … please help me

Posts: 1

Participants: 1

Read full topic

@ArsalanSavand wrote:

Hi,

I’m using Ionic 4 latest beta version and all my pages and components are lazy loaded.
I have a component called “EntriesComponent” that in its ngOnInit function I get data from an endpoint, and everything works fine.

Problem is, when I’m already in my EntriesComponent view ( route ) and I want to navigate to it again, the component’s ngOnInit function won’t fire also the constructor.

import { Component, OnInit } from '@angular/core';
import Entry from '../../models/entry';
import { AuthService } from '../../services/auth/auth.service';

@Component({
  selector: 'app-entries',
  templateUrl: './entries.component.html',
  styleUrls: ['./entries.component.scss']
})
export class EntriesComponent implements OnInit {

  entries: Array<Entry> = [];

  constructor(private authService: AuthService) {
  }

  ngOnInit() {
    this.authService.entries().subscribe((data: Array<Entry>) => {
      this.entries = data;
      console.log(data);
    });
  }

}

How can I navigate to same route and fire constructor to get my data from the endpoint.

Posts: 3

Participants: 2

Read full topic

@sanesma93 wrote:

I am trying to load an array of saved templates to be able to select from them as options in an ion-select and based on which option is chosen the form should be updated.

This is how my templates are composed:

 export interface Template {
  destination: string; //iban
  recipient: string;
  amount: number;
  reference: string;
}

And this is how my ion-select looks:

<ion-item>
           <ion-label>Load template</ion-label>
           <ion-select (change)="this.transactionForm.patchValue({recipient: template.recipient, destination: template.destination, amount: template.amount, reference: template.reference})">
             <ion-option *ngFor = "let template of templates;">
               {{template.reference}}
             </ion-option>
           </ion-select>
         </ion-item>

The idea is to load the saved templates and choose one in the list so that the values in the form I’m filling get updated once you make your choice.

This is how I initialise the form in the constructor of the .ts file:

constructor( public formBuilder: FormBuilder, public templateServicerino: TemplateService) {
    this.templateServicerino.createTemplate("DE365849", "John Johnson", 420, "Testerino");
    this.templates = this.templateServicerino.getAllTemplates();
    this.transactionForm = this.formBuilder.group({
          recipient: [''],
          destination: [''],
          amount: ['0'],
          reference:  ['']
        });

When I test this out I do get an option called “Testerino” when I click the select but once I press OK the form is not updated. My IDE says the field “template” in is unresolved

Capture.PNG626×508 10.5 KB

Thank you in advance for your help

Posts: 1

Participants: 1

Read full topic

@charlescc wrote:

Hello,

I’m updating my app to ionic 4, and trying to login with google plus, but the function googlePlus.login() doesn’t seem to work. Even in a try{}catch{}, there is no error showing up…

my code :

async signInWithGoogle() {

  console.log('afAuth.signInWithGoogle()')
  if (this.plt.is('cordova')) {
    console.log('cordova')
    try {

      const gplusUser = await this.googlePlus.login({
        'webClientId': 'MYWEBCLIENTID.apps.googleusercontent.com',
        'offline': true
      })
      console.log(gplusUser)
      return await this.afAuth.auth.signInWithCredential(firebase.auth.GoogleAuthProvider.credential(gplusUser.idToken))
  
    } catch(err) {
      console.log(err)
      return {'error' : err}
    }
  }
  else {
    return this.oauthSignIn(new firebase.auth.GoogleAuthProvider());
  }
}

this is what the console returns :

afAuth.signInWithGoogle()
cordova

I haven’t changed my app id or sha1 certificate.

my ionic info

Ionic:

   ionic (Ionic CLI)             : 4.7.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.13
   @capacitor/core           : 1.0.0-beta.13

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, browser 5.0.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 15 other plugins)

System:

   ios-deploy : 2.0.0
   NodeJS     : v10.3.0 (/usr/local/Cellar/node/10.3.0/bin/node)
   npm        : 6.1.0
   OS         : macOS Mojave
   Xcode      : Xcode 9.4.1 Build version 9F2000

Hope you can help me

Posts: 1

Participants: 1

Read full topic

@danishkhanmdk1995 wrote:

Hi everyone.

I am facing an issue related to the fileTransfer plugin. i am trying to download the file using plugin function fileTransfer.download but facing the issue its every time said that isdirectory:false. i have teted on both using dev app and also tested after creating the apk file but the same error shows. following is the screen shot of the error.

Screenshot_20190111-000739_Ionic DevApp.jpg1080×1920 163 KB

Please help me to solve this issue.

Thanks in advance.

Posts: 1

Participants: 1

Read full topic

@adelali wrote:

I am having an issue with refresher (pull to refresh)…
Pull to refresh works fine but the problem happen when I try to scroll down, the refresh function gets called which prevent me from scrolling down.

The problem happen after the first pull to refresh. Before refreshing scroll works fine…

I’m not sure if this a bug or not.

I am using grid with row and two cards each row…

Your help is appreciated

Posts: 1

Participants: 1

Read full topic

@vvanherk wrote:

Hello.
I’ve recently gone through the following tutorial from Josh Morony regarding multi-file upload.

I have the code working in my app.
I would like to know how best to be able to view or remove the attachment when clicking on it in the list of attachments.

Direction to any examples, ideas, or snippits would be appreciated.
Cheers.

Posts: 1

Participants: 1

Read full topic

@acryforhelp wrote:

I am trying to make a chat app, every time someone submits a message, it should get displayed but that is simply not happening.

my HTML code is

<ion-header>

  <ion-navbar>
    <ion-title>schat</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

<ion-list>
<ion-item *ngFor="let chat of chats" no-lines>
    <div class="chat-status" text-center *ngIf="chat.type==='join'||chat.type==='exit';else message">
      <span class="chat-date">{{chat.sendDate | date:'short'}}</span>
      <span class="chat-content-center">{{chat.message}}</span>
    </div>
    <ng-template #message>
      <div class="chat-message" text-right *ngIf="chat.user === username">
          <div class="right-bubble">
            <span class="msg-name">Me</span>
            <span class="msg-date">{{chat.sendDate | date:'short'}}</span>
            <p text-wrap>{{chat.message}}</p>
          </div>
        </div>
        <div class="chat-message" text-left *ngIf="chat.user !== username">
          <div class="left-bubble">
            <span class="msg-name">{{chat.user}}</span>
            <span class="msg-date">{{chat.sendDate | date:'short'}}</span>
            <p text-wrap>{{chat.message}}</p>
          </div>
        </div>
      </ng-template>
    </ion-item>
  </ion-list>

<ion-footer>
  <ion-grid>
    <ion-row>
      <ion-col col-10>
        <ion-input type="text" placeholder="Type a message" [(ngModel)]="data.message" name="message"></ion-input>
      </ion-col>
      <ion-col col-2 (click)="sendMessage()">
        <ion-icon name="paper-plane"></ion-icon>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>

My typescript code is:

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Content } from 'ionic-angular';
import * as firebase from 'firebase';

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

@IonicPage()
@Component({
  selector: 'page-schat',
  templateUrl: 'schat.html',
})
export class SchatPage {
  @ViewChild(Content) content: Content;
  fire=firebase.database();
  data = { message:'', username:'', type:''};
  chats=[];
  userId:string;
  key:string;
  offStatus:boolean=false;



  constructor(public navCtrl: NavController, public navParams: NavParams) {

    this.userId = firebase.auth().currentUser.uid;
    this.data.type='message';
    this.data.username=this.userId;

    this.fire.ref('/users/' + this.userId).once('value', resp=>{
      let details=resp.val();
      let schoolid=details.schoolid;

      this.key = this.fire.ref('/chats/').push().key;

      this.fire.ref('/chats/' + this.key).set({
        studentid:this.userId,
        chatended:false,
        chatstarted:false,
        startime:new Date().toLocaleString(),
        chatid:this.key,
        schoolid:schoolid




      });
    });

    this.fire.ref('/chats/'+this.key+'/messages').on('value', resp=>{
      let detail=resp.val();

      console.log(detail);

      this.chats=[];
      this.chats=snapshotToArray(resp);
      setTimeout(() => {
        if(this.offStatus === false) {
          this.content.scrollToBottom(300);
        }
      }, 1000);

    });
}


sendMessage() {

  this.fire.ref('/chats/'+this.key+'/messsages').push().set({
    type:this.data.type,
    user:this.userId,
    message:this.data.message,
    sendDate:new Date().toLocaleString(),

  });
  this.data.message = '';
}

  ionViewDidLoad() {
    console.log('ionViewDidLoad SchatPage');
  }

}
export const snapshotToArray = snapshot => {
    let returnArr = [];

    snapshot.forEach(childSnapshot => {
        let item = childSnapshot.val();
        item.key = childSnapshot.key;
        returnArr.push(item);
    });

    return returnArr;
};

Posts: 1

Participants: 1

Read full topic

@AnastasiaR wrote:

Hi. I’m trying out the Ionic framework. I didn’t fully read all the steps in the “Create your App” section of the welcome page and picked “Ionic Appflow” instead of GitHub. How do I switch my choice? I keep deleting and re-creating the project folder but now it no longer asks me the questions. As soon as I type in “ionic start myApp tabs” it just creates a bunch of stuff and that’s it.

Also, I’m using Cygwin in Windows 8.1, because windows native command prompt gave me a lot of errors due to not having SSH capabilities (those weren’t in the requirements). Is that ok?

Posts: 1

Participants: 1

Read full topic

@trfletch wrote:

I have noticed on Android tablets (at least on the emulator) that when selecting an input within a modal the modal suddenly goes full width. This doesn’t happen on iPad. Is this normal behaviour or is there a way to stop this?
Screenshots below showing before clicking on the input field and after.

Capture.JPG1096×743 28.5 KB

Capture2.JPG1093×741 27.7 KB

Posts: 1

Participants: 1

Read full topic

@xxstefanoxx wrote:

Hi, I’ve a question about in-app purchase subscription. In my app you can create multiple account.
this is an example of my problem.

Login paolo.rossi@gmail.com and buy premium,
Logout paolo.rossi@gmail.com
Login paolo.verdi@gmail.com
I’ve already premium and I can’t buy
How to solve this?
In many app you can buy premium in the same phone with different account. is it a ionic limitation?

Posts: 1

Participants: 1

Read full topic

@ReacaoSistemas wrote:

It is working so when I go to the end of the screen, it activates the event, but it does not load.
You need to lift the screen a bit to show the list.

home.ts

import { Component } from ‘@angular/core’;
import { NavController, AlertController, LoadingController, Slide } from ‘ionic-angular’;
import * as WC from ‘woocommerce-api’;

import { ProdutoDetalhePage } from ‘./…/produto-detalhe/produto-detalhe’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

woocommerce: any;
products: any;
page: number;
maisVendidos: any;
maisVendidosLista: any;
moreProducts: any;

constructor(
public navCtrl: NavController,
public alertCtrl: AlertController,
public loadingCtrl: LoadingController) {

this.page = 2;

this.woocommerce = WC({
  url: "xxxxxxx/",
  consumerKey: "xxxxxxxxxxx",
  consumerSecret: "xxxxxxxxxxxx",
  wpAPI: true,
  version: "wc/v3"
});

this.loadMoreProducts(null);

this.woocommerce.getAsync("products?featured=true&per_page=10").then((data) => {
  this.products = JSON.parse(data.body);
  console.log(this.products);
}, (err) => {
  console.log(err)
});   

}

loadMoreProducts(event) {

if (event == null) {
  this.page = 2;
  this.moreProducts = [];
} else {
  this.page++;
}

this.woocommerce.getAsync("products?page=" + this.page).then((data) => {
  this.moreProducts = this.moreProducts.concat(JSON.parse(data.body));

  if (event != null) {
    event.complete();
  }
  if (JSON.parse(data.body).lenght < 10) {
    event.enable(false);
  }
}, (err) => {
  console.log(err)
})

}

}

home.html

<ion-list>

<ion-item *ngFor=“let produto of moreProducts” text-wrap>

<ion-thumbnail item-left>

<img [src]=“produto.images[0].src” />

</ion-thumbnail>

<h2>{{ produto.name}}</h2>

<p>

<span [innerHTML]=“produto.description.substr(0, 50) + ‘…’”></span>

<span [innerHTML]=“produto.price_html”></span>

</p>

</ion-item>

</ion-list>

<ion-infinite-scroll (ionInfinite)=“loadMoreProducts($event)”>

<ion-infinite-scroll-content></ion-infinite-scroll-content>

</ion-infinite-scroll>

Posts: 1

Participants: 1

Read full topic

@paulbuscano003 wrote:

Hi,

I have a API url with raw data in return and I want to convert it to array. Is this possible?

Screen Shot 2019-01-10 at 3.41.08 PM (2).png1680×1050 118 KB

Posts: 1

Participants: 1

Read full topic

@salonApp wrote:

I am using infinite scroll and it causing problem in android only
I bind ion-content with “fullscreen” to hide and show header. but in ifinite-scroll doesn’t work in Android but works fine on iOS devices.
code Sample

<ion-header [hidden]="isScrollStarted">
</ion-header>

<ion-content fullscreen>

<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>

</ion-content>

any help would be appreciated. Thanks

Posts: 1

Participants: 1

Read full topic

@nextgencodecompany wrote:

Is it possible to specify for ion-back-button’s defaultHref to navigate using transition backwards?

Currently if you land on a url with no navigation history, the back button will take you to the defaultHref in a forward transition but in most cases, you want the transition to appear as if there was an existing navigation history by navigating backwards. Thus the user interface gets stuck in this odd forwards then backwards “glitch” if you continue to navigate back.

Posts: 1

Participants: 1

Read full topic

@iondafi wrote:

I fetch some data from API then I use the RXJS operator finalize() to dismiss the loading overlay but randomly it stays on screen.

The workaround I’m using is to present the dialog with a long duration and this seems to work, but I would understand why sometime it works and sometime it doesn’t, is my code, shown below, incorrect?

Consider the output log is always the same, so the finalize() is called correctly.

getMenu start
getMenu inside subscribe
getMenu before dismiss inside finalize
getMenu after dismiss inside finalize   

  private startFetchMenu() {
    this.presentLoading().then(() => {
      this.fetchMenu();
    });
  }


  fetchMenu() {
    console.log('getMenu start');
    this.menuService.getMenu('en')
      .pipe(
        finalize(() => {
          console.log('getMenu before dismiss inside finalize');
          this.loadingController.dismiss();
          console.log('getMenu after dismiss inside finalize');
        })
      )
      .subscribe(menu => {
        this.menu = menu.data;
        console.log('getMenu inside subscribe');
      }, error => {
        console.error(error);
      });
  }
  private async presentLoading() {
    await (await this.loadingController.create({duration: 6000})).present();
  }

Posts: 1

Participants: 1

Read full topic

@JensOlleOlsson wrote:

Hi,

What if I created a new page in my application, but I spelled the word for the page wrong.
For example if I write in the CLI:

ionic g pages/tbaPage

but what I wanted was:

ionic g pages/tabPage

Now, if I go ahead and rename the files manually, I will get the following error:

[ng] ERROR in ./src/app/pages/tabPage.page.ts
[ng] Module not found: Error: Can't resolve './tabPage.page.scss' in 'C:\Dev\myApplication\src\app\pages'

AND, I also get an error in my tabPage.page.spec.ts, where I get an error on the import, like this:

import { TabPagePage } from './tabPage.page';

Error:
[ts] Module '"c:/Dev/myApplication/src/app/pages/tabPage.page"' has no exported member 'TabPagePage'. [2305]

This can impossibly never had happen to anyone but me, yet NO valuable information or tutorial on this can be found.

Can the hero I need step forward? Haha

All the best

Posts: 1

Participants: 1

Read full topic

@pandait wrote:

Hi guys

How to use the IONIC UI in the Blank Project?

i create new page ,cant use the style css like the button

<button full ion-button>Test</button>

ionic (Ionic CLI) : 4.6.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-rc.1
@angular-devkit/build-angular : 0.12.1
@angular-devkit/schematics : 7.1.4
@angular/cli : 7.1.4
@ionic/angular-toolkit : 1.2.2

Posts: 2

Participants: 2

Read full topic

@snacketti wrote:

Simple as that.

I can’t believe it is so difficult to import a simple npm module as

‘rss-parser’

into a Stencil project.

I installed it and tried to use it with

import { rss-parser } from ‘rss-parser’

and a lot of different syntax for importing it. I just cant get it to work. What am I still doing wrong after 10 hours?
Is this a bundler problem or am I missing something else? Im pretty new to ionic/stencil.

Thanks for your help!

Posts: 3

Participants: 2

Read full topic