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

IONIC3 - Tab bar hit boxes off

$
0
0

@jp4velocity wrote:

On the IPhone 5S i can’t select a tab from the tab bar by tapping it directly. I have to tap slightly above it to activate the targeted tab button. (Here is a video showing the Problem.)

ionic info:

Ionic:

   ionic (Ionic CLI)  : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.3

Cordova:

   cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-webview 1.2.1, (and 17 other plugins)

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.0
   NodeJS     : v10.15.3 (/usr/local/bin/node)
   npm        : 6.9.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.2.1 Build version 10E1001

How to fix this? (It’s kind of a blocker)

Posts: 1

Participants: 1

Read full topic


Ionic 4 Back Button not working

Routing In React, what is this `:tab` thing

$
0
0

@aaronksaunders wrote:

Why does the ionic cli create a blank app in react with a route containing path="/:tab(home)"

<Route path="/:tab(home)" component={Home} exact={true} />

When path="/home" works just fine?

 <Route path="/home" component={Home} exact={true} />

I cannot find nothing in the documentation using this :tab format and I have written an app with it using tabs and it seems to be working fine

Posts: 1

Participants: 1

Read full topic

Ionic 4 won't show ads but in console is successful

$
0
0

@robertnic wrote:

I am trying to get Admob in my app, I get console log success message but no ad showing in my app.

This is what I have:

app.module

import { AdMobFree } from '@ionic-native/admob-free/ngx';

providers: [
    AdMobFree,
]

posts.page.ts

import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free/ngx';

constructor(
    private admobFree: AdMobFree
) { }

ionViewDidEnter() {
    this.showBannerAds();
}

showBannerAds() {
    const bannerConfig: AdMobFreeBannerConfig = {
      id: 'ca-app-pub-xxxxxx/xxxxxxxxxx',
      isTesting: false,
      autoShow: true,
      bannerAtTop: false
    };
    this.admobFree.banner.config(bannerConfig);
    console.log('start to prepare banner ads...'); //shows in console

    this.admobFree.banner.prepare()
      .then(() => {
        console.log('start to show banner ads...'); //shows in console
        this.admobFree.banner.show();
      })
      .catch(err => {
        console.log('show banner ads error: ', err);
      });
}

PS:
At the first I thought maybe i need to add my app in google play then they show, but even that my app is live on google play store yet no ads showing.

Any idea what could be wrong?

Posts: 1

Participants: 1

Read full topic

Set App settings programmatically

$
0
0

@Kyrax80 wrote:

In Ionic you can set the App settings in the app.module.ts like this:

Ionic...forRoot({
      mode: 'iOS',
      backbuttonText: ''
})

is there a way to do this dynamically in a page, for example?

Thanks!

Posts: 1

Participants: 1

Read full topic

NullInjectorError: No provider for Instagram!

Remove white space in ion-header after dismissing *ngIf template

$
0
0

@theHamster wrote:

On my Ionic 3 app page I’ve got an ion-header with and ion-searchbar inside it. Directly below the searchbar, I’m using an *ngIf directive to show an ion-grid containing the search term, if the search is active. It’s all working fine, and I’m electing to place the grid inside the header because I want the grid to always remain at the top of the screen and above the rest of the scrollable content in the page as the user scrolls results.

The problem is, when the *ngIf directive hides the grid (working correctly on native iOS device), the header still keeps the white space that the grid was taking up with it’s height. It may be worth saying this needs to be tested on native.

The code looks like this:

<ion-header>
    <ion-navbar>
        ...
    </ion-navbar>
    <ion-searchbar>
        ...
    </ion-searchbar>
    <ion-grid *ngIf="searchActive">
        ... only displayed when the search is active and when displayed, takes some extra height ...
    </ion-grid>
</ion-header>

I’ve searched a few forums now, and tried a couple of methods using dynamic CSS class to set the height of the grid to 1px when search is not active, etc… but so far the only way to reset the UI and remove that white space is to tap the searchbar again (which brings up the device keyboard) and then use the native cancel search button. That seems to reset the header to how it appears before the grid is displayed.

Any suggestions for how to neatly clear that vertical space on directive change?

Thanks in advance!

Posts: 1

Participants: 1

Read full topic

Ion-input ClearInput not clearing the value in android device

$
0
0

@KasunGamage wrote:

Here I use the latest ionic version. when I clear the input field it’s clearing the typed value.but when I type again new text append to the previous value.

Posts: 1

Participants: 1

Read full topic


Anyone actually using AppFlow?

$
0
0

@MrHakala wrote:

Is there anyone actually using AppFlow to build (and release) apps? I mean, I just became aware that when selecting the “build type = release”, this DOES NOT apply the “–prod” or “–release” options to your build.

To use AppFlow for an actual release build, you have to add the options to the package.json scripts. eg.

  "scripts": {
    "build": "ionic-app-scripts build --prod --release",

Now I’ve scoured the internet (ionic build (v3/4), ionic cordova build, @ionic/app-scripts, ng build, etc.) and nowhere is there any mention of this.

The only documentation I’ve found related to this is:
" npm run build will run if a build script is detected in the scripts section of your package.json in order to build the web assets for your application." found here

If AppFlow isn’t intended to cater for release builds what is the point of using it :roll_eyes:

Posts: 1

Participants: 1

Read full topic

Je n'arrive pas a afficher mes données sur ma page mais dans la console sa marche deja

$
0
0

@kapking wrote:

salut, si quelqu’un peut m’aider!!
sa c’est mon service

import { Injectable } from ‘@angular/core’;
import ‘rxjs/add/operator/map’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;
import ‘rxjs/add/operator/catch’;
import { newGlobal } from ‘…/…/Models/newGlobal-Model’;
import { Observable } from ‘rxjs/Observable’;

@Injectable()
export class ProduitProvider {
private BASE_URL: string = “http://localhost:8000/api/produits”;
private source: string = “produits”;

constructor(public http: Http) {

}
getProduct(): Promise {
const url = ${this.BASE_URL};
return this.http.get(url)

  .toPromise()
  .then(resp => resp.json() as newGlobal)
  .catch(error => console.log('une erreur' + error))

}
}

ensuite sa c’est mon model

export class newGlobal {

id: number

titre: string;

description:string;

prix: number;

qte: number;

image: string;

created_at: string;

updated_at:string;

id_categorie: string;

}

voila mon homme.ts

import { Component } from ‘@angular/core’;
import { NavController} from ‘ionic-angular’;
import { ProduitProvider} from ‘…/…/providers/produit/produit’
import {newGlobal } from ‘…/…/Models/newGlobal-Model’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
article:newGlobal= new newGlobal();
constructor( public navCtrl: NavController, private produit : ProduitProvider) {
this.produit.getProduct()
.then(newsFetched =>{
this.article = newsFetched
console.log(this.article)
});

}

}

enfin voila mon page html



{{item.title}}

du coup le résultats viens seulement en console mais pas dans la page, alors j’ai essayer, mais je suis bloquer pour si dans le console , le résultat sort déjà mais dans ma page sa ne sort pas!!!

alors je ne sait ou sa trouve l’erreur car sa semble deja ne pas avoir une erreur, mais je veux afficher sur ma page les données de mon api

Posts: 1

Participants: 1

Read full topic

J n'arrive pas a afficher sur la page

$
0
0

@kapking wrote:

salut, si quelqu’un peut m’aider!!
sa c’est mon service

import { Injectable } from ‘@angular/core’;
import ‘rxjs/add/operator/map’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;
import ‘rxjs/add/operator/catch’;
import { newGlobal } from ‘…/…/Models/newGlobal-Model’;
import { Observable } from ‘rxjs/Observable’;

@Injectable()
export class ProduitProvider {
private BASE_URL: string = “http://localhost:8000/api/produits”;
private source: string = “produits”;

constructor(public http: Http) {

}
getProduct(): Promise {
const url = ${this.BASE_URL};
return this.http.get(url)

  .toPromise()
  .then(resp => resp.json() as newGlobal)
  .catch(error => console.log('une erreur' + error))

}
}

ensuite sa c’est mon model

export class newGlobal {

id: number

titre: string;

description:string;

prix: number;

qte: number;

image: string;

created_at: string;

updated_at:string;

id_categorie: string;

}

voila mon homme.ts

import { Component } from ‘@angular/core’;
import { NavController} from ‘ionic-angular’;
import { ProduitProvider} from ‘…/…/providers/produit/produit’
import {newGlobal } from ‘…/…/Models/newGlobal-Model’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
article:newGlobal= new newGlobal();
constructor( public navCtrl: NavController, private produit : ProduitProvider) {
this.produit.getProduct()
.then(newsFetched =>{
this.article = newsFetched
console.log(this.article)
});

}

}

enfin voila mon page html




** <div ngFor=“let item of articles”> **
**

*
** {{item.title}}**

** **

** **

du coup le résultats viens seulement en console mais pas dans la page, alors j’ai essayer, mais je suis bloquer pour si dans le console , le résultat sort déjà mais dans ma page sa ne sort pas!!!

alors je ne sait ou sa trouve l’erreur car sa semble deja ne pas avoir une erreur, mais je veux afficher sur ma page les données de mon api

Posts: 1

Participants: 1

Read full topic

Ng-package Ionic App

$
0
0

@Sushil-Tango wrote:

I am trying to ng-package ionic module and use that module in another ionic app. is there any guidance or tutorial for this?

Posts: 1

Participants: 1

Read full topic

Wowza live streaming

$
0
0

@krishkk wrote:

Hey , i want to implement live streaming for ionic application. For that i was using wowza rest api to create stream and start and stop stream but not able to open my device’s camera.I am not getting any solution that how can i record my stream and open camera . I also used rtmp-npm for ionic framework but that only have recording property for android only for short time and for ios plugin is not working.

https://sandbox.cloud.wowza.com/api/beta/docs#tag/live_streams

Posts: 1

Participants: 1

Read full topic

Ionic Pro Deploy - Show user "What's new in this version" after auto update

$
0
0

@theHamster wrote:

Hey!

I’m using the Deploy API with Ionic 3, and found these docs super helpful, so thanks for that!

I’ve setup the deploy API to check for and auto download the latest version of my app, and I’m using 2 channels: ‘development’ and ‘production’. It’s working nicely! The question is…

I’d like to show the user a message, after each new version has been installed, telling them "what’s new in this version’. This seems like good UX, as we’re skipping app store updates. So example flow… The user is on the production channel, opens the app, gets the auto update in the splash screen (might change this to use the background method later!), enters the app on the default page, sees something (modal? alert? etc.) telling them about the sweet new features they’ve now got available.

Keen to hear ideas for the cleanest/most efficient way to implement this?

Thanks in advance :slight_smile:

Posts: 1

Participants: 1

Read full topic

How to create custom Ionic Starter template

$
0
0

@msmsmonika wrote:

Can anyone guide me how to create a custom template which will act as ionic template for starting the project base.

Posts: 1

Participants: 1

Read full topic


Prefers-color-scheme not working?

$
0
0

@groupclaes wrote:

Since the release of macOS Mojave we redesigned all our websites etc to support the dark theme. This is a system set setting available in most OS/browser combinations. On iOS in safari it works perfectly but not in my ionic app.

I have the following CSS to make the difference obvious.

@media (prefers-color-scheme: dark) {
.content-md,
.content-ios {
background-color: green !important;
}
}

@media (prefers-color-scheme: light) {
.content-md,
.content-ios {
background-color: yellow !important;
}
}

source https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

No matter what I do the content is always yellow, if I open it in the browser on my ios device it works perfectly.

Posts: 1

Participants: 1

Read full topic

Float search bar auto-complete over the content

$
0
0

@LEESOHEE wrote:

3
i want these shape.
auto-complete contents are above the original contents.

but my app,
1
this is original contents.
and

2
whenever i try to search something, the auto-complete contents are push the original contents.

i want these are overlapping.
help

Posts: 1

Participants: 1

Read full topic

Displaying PDF in iframe in native

$
0
0

@JohnCressman wrote:

I have built part of my app to display local PDFs from a pdf folder under assets in an iframe. It works fine in ionic lab, but will it work with ios and android native?

Is there anything special I need to do?

html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>{{information.name}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <iframe name= "eventsPage" [src]="this.mysite" width="100%" height="95%">
  </iframe>
</ion-content>

ts

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {GetProtocolsService} from '../../services/get-protocols.service';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-protocol-details',
  templateUrl: './protocol-details.page.html',
  styleUrls: ['./protocol-details.page.scss'],
})
export class ProtocolDetailsPage implements OnInit {

  information = null;
  protocols = null;

  mysite = null;

  constructor(private activatedRoute: ActivatedRoute, private protocolService: GetProtocolsService, private router: Router,
              private sanitizer: DomSanitizer) { }

  ngOnInit() {
    // Get the ID that was passed with the URL
    let id = this.activatedRoute.snapshot.paramMap.get('id');

    console.log('Details');

    this.protocolService.getProtocols().subscribe(result => {
      console.log('getHospitals1 executed')
      this.protocols = result;
      console.log('result', result);
      this.information = this.filterArr(id)[0];
      console.log('information', this.information);
      this.mysite = this.sanitizer.bypassSecurityTrustResourceUrl('../../../assets/pdf/' + this.information.pdf.toString());
    });
  }

  filterArr(search) {
    // Get the real array forst of all
    let arr = this.protocols;

    return arr.filter(oneObj => oneObj.id.indexOf(search) >= 0);
  }

}

Posts: 1

Participants: 1

Read full topic

Take the data of specifique id firebase

$
0
0

@ethan2 wrote:

i want to get data from firebase using a specifique id
i tried this but it keep taking the id and return null as data
export class Festival{

monument= {} as Monument;

itemList: AngularFireList

itemArray =
imageSource;
musePhoto;

constructor(public navCtrl: NavController, public navParams: NavParams,
public db:AngularFireDatabase,public festivalservice : FestivalserviceProvider,
public alertCtrl: AlertController, public storage:Storage, public router:Router) {

this.itemList = db.list('festival')

this.itemList.snapshotChanges()
.subscribe(actions=>{
      actions.forEach(action=>{
        let y = action.payload.toJSON()
        y["key"] = action.key
        this.itemArray.push(y as Monument)

})
})
console.log(this.itemArray)

  this.imageSource = 'bardo4';
  this.getPhotoUrl();

}

getPhotoUrl(){
firebase.storage().ref().child(‘images/’+this.imageSource+’.jpg’).getDownloadURL().then((url)=>{
this.musePhoto = url;
})
}

moreInfo(key){
this.navCtrl.push(DetailsFestivalPage, {key: key} )
console.log(key);

// this.router.navigate(['detailsfestival/'+key])

}

}

export class Details {
id:string;
itemArray=;
constructor( public museService:FestivalserviceProvider,
public activatedRoute:ActivatedRoute) {
this.id = this.activatedRoute.snapshot.params[‘id’];
this.museService.getFestival(this.id).snapshotChanges().subscribe(actions=>{
let y = actions.payload.toJSON()
this.itemArray.push(y as Monument)

});

console.log(this.itemArray);

 }

}

Posts: 1

Participants: 1

Read full topic

[ionic 4] - How to disable swipe back /go back

$
0
0

@mcihak wrote:

Hello,
is there some possibility to disable swipe back (on iOS) and go back (and android) for each component/page separately?

E.G. When user log out from app, he is redirected to the login page, but now, when he goes back, he get the profile page :-/

So if swiping back is not possible to disable, is there some way to prevent this behavior?

Thanks

Posts: 1

Participants: 1

Read full topic

Viewing all 70440 articles
Browse latest View live