@EnzoDLP wrote:

Like i said in the title, when i use the input in the footer, the keyboard is showing above the footer so i can’t use it …

The problem is since I made the update of the plugin:

cordova-plugin-ionic-keyboard BY ionic-plugin-keyboard

Before the update i was using in the app component: keyboard.dissableScroll(false)
(this is deprecated now)

And in the app.module I use this that I always use but I do not know what it’s used for … :
IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false })

Someone have an idea of ​​how to solve this problem …?

Thank you

Posts: 1

Participants: 1

Read full topic

@rajbasilio wrote:

I have an array called dewList. I was to iterate or get the values in the reverse order.
<ion-item *ngFor="let list of dewList" >

I have tried it with the
<ion-item *ngFor="let list of dewList.slice().reverse()" >
But I’m getting an error as

ERROR TypeError: _co.dewList.slice is not a function
    at Object.eval [as updateDirectives]

How Can I solve this?

Posts: 1

Participants: 1

Read full topic

@Birke wrote:

Hello,

i want to update the badge number if a message is receive. but in in plugin cordova-plugin-firebase it is only possible, if the app is in foreground. how can i do that if the app is in background or closed?

i try the plugin cordova-plugin-fcm-with-dependecy-updated, but is not firing.

initializeApp() {
    this.platform.ready().then(() => {
      this.firebaseCloudMsg.onNotification().subscribe(data => {
        console.log('DATA: ', data);
        if(data.wasTapped){
          console.log("Received in background", data);
        } else {
          console.log("Received in foreground", data);
        };
      });

    });
  }

any solution for this problem?

Posts: 1

Participants: 1

Read full topic

@acqua000 wrote:

how to change color bullet in ionic 4 on slides dot? please not work .swiper-pagination { padding: 3px; bottom:0px; .swiper-pagination-bullet { background: #FFF; margin: 0 3px; } }

Posts: 1

Participants: 1

Read full topic

@benjaminb_ wrote:

Hey there

Is it possible to adjust the height of the header in ionic V4 ? I want to increase it a little bit.

I tried with CSS, it’s fine on the browser, but on real device (iOS) it’s broken the header is cut.

Capture d’écran 2018-12-18 à 16.39.52.png932x912 18 KB

Capture d’écran 2018-12-18 à 16.40.11.jpg996x1016 73.5 KB

Capture d’écran 2018-12-18 à 16.40.56.jpg1036x896 79.4 KB

thanks !

Posts: 1

Participants: 1

Read full topic

@patrickSiyou wrote:

hello the team!
I tried to look on the forum the solutions to the problem similar to this one but I still have not managed to correct it. please somebody can help me?

app.html

<ion-menu id="myMenu" [content]="content">

    <ion-header >
        <ion-navbar >
             <ion-title>   {{based on login data}}</ion-title>
       </ion-navbar>
    </ion-header>



</ion-menu>
      
<ion-nav id="nav" #content [root]="rootPage"></ion-nav>

app.component.ts

   logout() {
    this.auth.logout().subscribe(succ => {
    this.navCtrl.setRoot('LoginPage')
    });
  } 

  openPage(p){
    if(p.title == 'Profile'){
      this.navCtrl.push(p.page);
    }else{
        this.navCtrl.setRoot(p.page);
      }
    
  }

auth.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { BookingDataService } from '../booking-data-service/booking-data-service';


@Injectable()
export class User {
  name: string = "";
  email: string = "";
 
  constructor(name: string, email: string) {
    this.name = name;
    this.email = email;
  }
}

@Injectable()
export class AuthService {
  currentUser: User;

  constructor(private bds: BookingDataService) {
  }

  public login(credentials) {
    if (credentials.email === null || credentials.password === null) {
      return Observable.throw("Please insert credentials");
    } else {
      return Observable.create(observer => {
        // verifica password al backend
        //let access = (credentials.password === "pass" && credentials.email === "email");
        let access = (this.isPresentCredential(credentials.email));
        this.currentUser = new User('patrick', 'patrick.siyou@atos.com');
        observer.next(access);
        observer.complete();
      });
    }
  }

  isLoggedIn(){
    return this.currentUser != null;
  }

  

  public getUserEmail(){
    return this.currentUser.email;
  }
  
  
  public getUserPicture() : string {
    return "../assets/imgs/patrick.png";
  }
 
  public logout() {
    return Observable.create(observer => {
      this.currentUser = null;
      observer.next(true);
      observer.complete();
    });
  }

  getUserList(){
    return this.bds.getAllUserList();
  }

  isPresentCredential(email: string){
    let userList = this.getUserList();
    for(let i=0; i<userList.length; i++){
      if(userList[i].getEmail() == email){
        return true;
      }
    }
    return false;
  }

}

login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController, LoadingController, Loading, MenuController } from 'ionic-angular';
import { AuthService } from "../../providers/auth-service/auth-service";
import { HomePage } from "../home/home";


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

export class LoginPage {
  loading: Loading;
  registerCredentials = { email: '', password: '' };

  constructor(public nav: NavController, private auth: AuthService, private alertCtrl: AlertController, private loadingCtrl: LoadingController, public menuCtrl: MenuController) {
    //this.menuCtrl.enable(false, 'myMenu');
  }

 
  public login() {
    this.showLoading()
    this.auth.login(this.registerCredentials).subscribe(allowed => {
      if (allowed) {        
        this.nav.setRoot(HomePage);
      } else {
        this.showError("Access Denied");
      }
    },
      error => {
        this.showError(error);
      });
  }

  showLoading() {
    this.loading = this.loadingCtrl.create({
      content: 'Please wait...',
      dismissOnPageChange: true
    });
    this.loading.present();
  }
 
  showError(text) {
    this.loading.dismiss();
 
    let alert = this.alertCtrl.create({
      title: 'Fail',
      subTitle: text,
      buttons: ['OK']
    });
    alert.present();
  }

  ionViewDidEnter() {
    // the root left menu should be disabled on this page
    console.log("isLoggedIn: "+this.auth.isLoggedIn());
    this.menuCtrl.enable(false, 'myMenu');
  }

  ionViewWillLeave() {
    // enable the root left menu when leaving this page
    console.log("isLoggedIn: "+this.auth.isLoggedIn());
    this.menuCtrl.enable(true, 'myMenu');
  }

}

thank you

Posts: 1

Participants: 1

Read full topic

@noext wrote:

Hello , i want to know if it possible to create my own animation between page with ion-router-outlet ?

In the documentation ( https://beta.ionicframework.com/docs/api/router-outlet ) , there is a animation property that can be a AnimationBuilder ( which one ? ionic/core or angular/animation ) but i the source code ( see here : https://github.com/ionic-team/ionic/blob/v4.0.0-beta.16/angular/src/directives/navigation/ion-router-outlet.ts ) there is no animation property

i would like to modify the animation of both “ios” and “md” mode to make them slower

Posts: 1

Participants: 1

Read full topic

@MarioRud wrote:

Hi all! I’m currently working on a simple Firebase/Ionic to do list app for an assignment. I’m quite new to Ionic and still figuring things out. I want to add an ngClass to each task in the list so that when the task is checked off, the task name gets striked through. The way I want to go about doing this is by assigning a status of ‘pending’ to each newly created task. Then, when the checkbox is ticked, the status is updated to ‘done’ and the ngClass changes the css. This is what I have so far but I’m getting the error: Cannot read property ‘set’ of undefined.

<ion-checkbox item-right (ionChange)="doneTask(task.key, task.status)"></ion-checkbox>
        <ion-label>
          <h2 [ngClass]="{'done': task.status !== 'pending'}">{{task.taskname}}</h2>

And in my typescript I have the following:

private taskListRef = this.db.list<Task>
   ('todoAppdb');
  
task = {
    id:'',
    status:'done',
    listid:1
  } as Task

In the constructor I have:

this.task.id = this.navParams.get('key'),
    this.task.status = this.navParams.get('status')

And my function is:

doneTask(id, status){
    this.taskListRef.update(this.task.id, {
      status = this.task.status
    })
  }

I’m not really sure what’s causing the error. Any help would be appreciated, thank you!

Posts: 1

Participants: 1

Read full topic

@anna_liebt wrote:

Hello,
I want to make my first steps on a pwa with ionic v4.
I want to open a file dialog, get the file or filepath , open any mail software with a new mail where the file is attached.

How should I do that. Any ideas, code, tutorial is very welcome.

Best regards, anna-liebt

Posts: 1

Participants: 1

Read full topic

@kevinpallado wrote:

So what am I doing is trying to get a map from a certain part and load it, it works with the browser and using ionic serve but when doing apk file (ionic build) and after installing the app it only shows grey color. I follow this tutorial to work in offline.

Below is my code

this.map = leaflet.map('map', { center: [8.48252667, 124.64722222], zoom: 16, trackResize: false});
leaflet.tileLayer('../assets/Northmin/{z}/{x}/{y}.png', {
attribution: 'Sample',
maxZoom: 16
}).addTo(this.map);
leaflet.marker([8.48252667, 124.64722222], {
title: 'Marker', alt: 'marker', icon: leaflet.icon({
iconUrl: '../assets/imgs/bank.png',
iconSize: [38, 38],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
shadowSize: [68, 95],
shadowAnchor: [22, 94]
})
}).addTo(this.map);

Is this the problem of loading the layer?

Posts: 1

Participants: 1

Read full topic

@rafidahputrih wrote:

How to create a different ion-card background color based on value of ion-input?
This is my .html

<ion-content padding>
  <ion-input [(ngModel)]="cStatus" type="hidden" value="Diterima"></ion-input>
  <ion-card [ngStyle]="{ 'background-color' : colorCard}" padding>
    {{cStatus}}
  </ion-card>
</ion-content>

and this is my .ts

export class PinjamanRiwayatPage {

  cStatus: string;
  colorCard: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    status = this.cStatus;
    this.setCardBgColor(status);
  }

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

  setCardBgColor(status){
    if(status == "Diterima"){
      this.colorCard = "#8CB369";
    }
    else if(status == "Ditolak"){
      this.colorCard = "#BC4B51";
    }
    else if(status == "Menunggu"){
      this.colorCard = "#F4E285";
    }
  }
}

Posts: 1

Participants: 1

Read full topic

@Scipio wrote:

Hi, my app consists of a set of tabs that user navigates through. The issue I am encountering is that on the actual device, the contents of some of the tabs are not getting painted, but when I click certain locations in the screen, the controls on the tab that should have been drawn are active and show dialogs etc. This only happens on an actual device, ie. ios/android, and it happens on both of them. This is the setup I have for the tabs:

  ...
  <ion-tabs selectedIndex="{{(navigationServiceProvider.currentPageIndex | async)}}" (ionChange)="tabChange($event)" #myTabs>        
    <ion-tab [root]="aRoot" tabTitle="A" show="false" (ionSelect)="changeToA()"></ion-tab> 
    <ion-tab [root]="bRoot" tabTitle="B" show="false" (ionSelect)="changeToB()"></ion-tab>    
    <ion-tab [root]="cRoot" tabTitle="C" show="false" (ionSelect)="changeToC()"></ion-tab>
    <ion-tab [root]="dRoot" tabTitle="D" show="false" ></ion-tab>
...

And

@Injectable()
export class NavigationServiceProvider {
...
_currentPageIndex = new BehaviorSubject<Number>(null);
  public readonly currentPageIndex : Observable<Number> = this._currentPageIndex.asObservable();
...
  gotoPage(pageIndex : number) {        
    this._currentPageIndex.next(pageIndex);
  }
}

Ionic Info:

Ionic:

   ionic (Ionic CLI)  : 4.5.0
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.1.7
Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.2, browser 5.0.1, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-webview 2.2.5, (and 17 other plugins)

I am using “rxjs”: “5.5.11”

If you have any ideas as to what might be causing this, I would love to hear them! Thank you for your help!

Posts: 1

Participants: 1

Read full topic

@yogesh1994 wrote:

How to possible select only one value from given group

image.png850x335 13.6 KB

Posts: 2

Participants: 2

Read full topic

@flycoders_sourav wrote:

i want to use use a external js cdn in my ionic 4 project
please help me out
Thanks in advance

Posts: 1

Participants: 1

Read full topic

@masifnawaz wrote:

Is it possible to create ocr recognition project with ionic that can count marked answers of mark sheet using ocr. Mark sheet look like image attached.

Posts: 1

Participants: 1

Read full topic

@danreil wrote:

I am using the new ionic 4.0.0-beta.19 framework, trying to use the ionic serve --ssl option.

I have created a new ionic project using the cli, I have run ionic generate ssl, which has created 2 files in /.ionic/ssl

cert.pem
key.pem

When running ionic serve --ssl in chrome I get the message “Your connection is not private”, I’ve had this before doing something similar, to fix this I’ve added the localhost cert file to my keychain access (using Mac) and set the certificate as always trust.

I’ve had this running before on ionic 4, by generating a certificate myself, adding the cert to the angular.json file like below:

 "serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "app:build",
    "ssl": true,
    "sslKey": "./ssl/server.key",
    "sslCert": "./ssl/server.crt"
  },
  "configurations": {
    "production": {
      "browserTarget": "app:build:production"
    }
  }
 }

With above though I added the crt file and key rather than pem and key, do I need to go add these manually? Or is this done automatically using the generate command?

When viewing the served localhost in the browser, I can see the serial number of the certificate the browser is using, is different to the serial number of the pem file I added to the keychain access, so wasn’t sure if it generates a .crt fiel in another local, that I need to add?

Posts: 1

Participants: 1

Read full topic

@CapAmerica wrote:

I get params for dropdownlist from server. Each drop down option get its color from server. I tried <ion-option [style.background-color]=“item.color”> but it not works. How to solve this problem?

Posts: 1

Participants: 1

Read full topic

@chakradharsw wrote:

I want to edit the ion-selectable fields .i have country ,state ,city fields and those are linked to each other.i am not able to set the the data in three columns because those fields are in onChange . Any one solve the issue that will helps me a-lot.

<ion-item>
    <ion-label>Country</ion-label>
    <ionic-selectable 
    item-content 
    [(ngModel)]="country"
    formControlName="country" 
    [items]="countries"
    itemValueField="clg_country_id" 
    itemTextField="clg_country_name" 
    [canSearch]="true" 
    (onChange)="countryChange($event)"
    >
    </ionic-selectable>
  </ion-item>

  <ion-item>
    <ion-label>State</ion-label>
    <ionic-selectable 
    item-content 
    [(ngModel)]="state"
    formControlName="state" 
    [items]="states"
    itemValueField="clg_state_id" 
    itemTextField="clg_state_name" 
    [canSearch]="true" 
    (onChange)="stateChange($event)"
    selected="true">
    </ionic-selectable>
  </ion-item>

  <ion-item>
    <ion-label>College</ion-label>
    <ionic-selectable 
    item-content 
    formControlName="college" 
    [items]="colleges"
    itemValueField="clg_id" 
    itemTextField="clg_name" 
    [canSearch]="true" 
    (onChange)="collegeChange($event)"
    selected="true">
    </ionic-selectable>
  </ion-item>

tsfile

loadCountries(){
this.Service.getCountries()
.subscribe((data)=>{
  this.countries=data.countries
 })
}

countryChange(event: {
component: IonicSelectableComponent,
value: any 
}) {

this.Service.getStates(event.value.clg_country_id)
.subscribe((data)=>{
  this.states=data.states;
  this.state=this.states[2]
})
}

stateChange(event:{
component:IonicSelectableComponent,
value:any
}){

this.Service.getColleges(event.value.clg_state_id)
.subscribe((data)=>{
  this.colleges=data.colleges;
})
}

collegeChange(event:{
component:IonicSelectableComponent,
value:any
}){
}

Posts: 1

Participants: 1

Read full topic

@JensOlleOlsson wrote:

Hi!

I think the modal-like component that slides up when you click “+ New Topic” here in the forum is very useful for an application that I’m developing. I just noticed that you can change the height of it as well by grabbing the blue bar at the top.

Does anybody know if this is an actual component that Ionic has or maybe someone has an idea of how one would create it?!

Love to hear your thoughts.
All the best, happy holidays!

Posts: 1

Participants: 1

Read full topic

@Arizona2014 wrote:

Hi,

I’ve push all my code to IONIC repo, and I can generate deploys and packages in my dashboard.
Now I wanna test my app in the old IONIC VIEW app, and when I enter my APP ID code in IONIC VIEW, it returns me : No App found with that ID

Can you please tell me what I’m doing wrong ?

Posts: 1

Participants: 1

Read full topic