@geshjosh wrote:

Hey, does anyone know of any working ad network plugins other than for admob?

Ideally I’d like to use Facebook’s ad network or Unity’s… but I can’t seem to find any working plugins rn, most of them were last updated in like 2016 etc

Posts: 1

Participants: 1

Read full topic

@rakesh26 wrote:

We are using lazy loading concept in our application. After implementing this, our application starts within 5 secs from splash screen to login screen, so there is no issues in this. But inside our application, 1 page takes very slow to load at first time only. After that it loads very fast. we don’t know why it takes so much time to load at first time only.Kindly give some solution to fix this issue. We are using Ionic 4

Posts: 1

Participants: 1

Read full topic

@premktr wrote:

I have to make a responsive website using ionic3-angular and I am stuck with positioning things and making them responsive.i have to develop something like this

localhost_8100_upcoming(iPhone 6_7_8).jpg750×1333 68.4 KB

but i stuck making in this

localhost_8100_upcoming(iPhone 6_7_8 Plus).jpg1242×2208 138 KB

.

this is my code and i didn’t apply any CSS for that thing.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="primary">
            <ion-button fill="none">
                <ion-icon id="chat" src="assets/custom/chat.svg">
                </ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-buttons slot="start">
            <ion-button fill="none">
                <ion-icon id="logoW" src="assets/custom/logo-W.svg" slot="icon-only"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title></ion-title>
<ion-grid>
<ion-row>
<ion-col size-sm="7"offset-sm="4" size-md="6" offset-md="3">
    <img style="max-height:auto " src="../assets/img/gami2.png" />

</ion-col>

</ion-row>



</ion-grid>

     

    </ion-toolbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col>


    <div id="slides1">
        <ion-slides #mySlider (ionSlidesDidLoad)="slidesDidLoad(mySlider)" [options]="sliderConfig" loop="true">
            <ion-slide>
                <img style="max-height:auto " src="../assets/img/1.png" />
            </ion-slide>
            <ion-slide>
                <img style="max-height:auto" src="../assets/img/2.png" />
            </ion-slide>
            <ion-slide>
                <img style="max-height:auto" src="../assets/img/3.png" />
            </ion-slide>
            <ion-slide>
                <img style="max-height:auto" src="../assets/img/4.png" />
            </ion-slide>
        </ion-slides>
    
    
    
    
    </div>






</ion-col>
</ion-row >



</ion-grid>
    


    <!--- <ion-searchbar *ngIf="isShown" showCancelButton="true" (ionCancel)="isShown=false" searchIcon> </ion-searchbar>
       <ion-buttons >
         <button ion-button icon-only  *ngIf="!isShown" (click)="isShown=true">
           <ion-icon id="search"name="search">

           </ion-icon>

         </button>
       </ion-buttons>   -->
    <ion-grid>
        <ion-row>

            <ion-col col-3>
                <div class="box">
                    <div class="container-2">
                        <span class="icon"><i class="fa fa-search"></i></span>
                        <input type="search" id="search" />
                    </div>
                </div>
            </ion-col>
            <ion-segment [(ngModel)]="status">
                <ion-col col-3>
                    <ion-segment-button color="primary" value="on">
                        <ion-label>Ongoing</ion-label>

                    </ion-segment-button>
                </ion-col>
                <ion-col col-3>
                    <ion-segment-button value="up">
                        <ion-label>Upcoming</ion-label>

                    </ion-segment-button>
                </ion-col>
            </ion-segment>

            <ion-icon id="filter" name="switch"></ion-icon>

        </ion-row>
    </ion-grid>

    <div [ngSwitch]="status" >

        <ion-grid *ngSwitchCase="'on'">
            <ion-row>
                <ion-col>

                    <ion-card *ngFor="let user of users">

                        <ion-icon name="close" class="close"></ion-icon>

                        <ion-icon src="assets/upcoimg/mark.svg"></ion-icon>
                        <ion-card-content>
                            <ion-card-title id="title"text-center >{{user}}</ion-card-title>
                            <ion-button color="danger" id="optin" >Opt-in</ion-button>
                            <ion-icon name="eye" id="views"></ion-icon>
                        </ion-card-content>
<ion-card-footer>  <ion-icon src="assets/upcoimg/insta.svg" id="insta" ></ion-icon></ion-card-footer>
                    </ion-card>
                </ion-col>
            </ion-row>
        </ion-grid>

        

    </div>

</ion-content>



<ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button color="dark">
        <ion-icon name="add"></ion-icon>
    </ion-fab-button>

    <ion-fab-list side="start">

        <ion-fab-button color="dark">
            <ion-icon name="logo-twitter"></ion-icon>
        </ion-fab-button>
        <ion-fab-button color="dark">
            <ion-icon name="logo-facebook"></ion-icon>
        </ion-fab-button>
        <ion-fab-button color="dark">
            <ion-icon name="logo-instagram">Youtube</ion-icon>
        </ion-fab-button>
    </ion-fab-list>

</ion-fab>


















```this is my code and i didnt apply any css for that thing.

Posts: 1

Participants: 1

Read full topic

@swanand6300 wrote:

Hi All,

I am new to ionic and i want to explore ionic deeply.

I am working on one challange and yet not found any solution.

Is it possible to create image picker view like WhatsApp.

WhatsApp offers image picker with Camera to take pictures and record a video.

Is it possible with ionic? If yes, then how?

Posts: 1

Participants: 1

Read full topic

@ishankarshinde wrote:

I am new to ionic and have created basic page with modal. This have title, textarea, submit button, Star rating.

Question : When keyboard up after click in on textarea views get shifted up or hidden.
After keyboard up expected page slides up and modal look like as below

Screenshot_20190516-165948.png1080×1920 73.9 KB

On device model content get hide like below.

Screenshot_20190516-165936.png1080×1920 122 KB

To reproduce issue create simple template app. code is below
home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
  <button ion-button (click)="openModal()"> CLick for Modal</button>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController,ModalController,ModalOptions } from 'ionic-angular';
import {RatePage} from '../rate/rate';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController, public modalCtrl:ModalController) {
  }

  openModal() {    
    console.log("Rate APP btn clicked ");
    const modalOptions: ModalOptions = {
      cssClass: "ratePageModal"
    };
    const modal = this.modalCtrl.create(RatePage, {}, modalOptions);
    modal.present();
  }
}

Create new page “rate” code for rate page is like this.
rate.scss

.ratePageModal {
    padding: 30px;
    background: rgba(0, 0, 0, 0.5);
    .modal-wrapper {
         border-radius: 7px;
         //background: rgba(0, 0, 0, 0.5) !important;
         height: 50% !important;
         margin-top: 50%;
         border-style: solid;
         border-color:#BEBEBE;
         border-width: 2px;
    }
    //height: 450px;
    //background-color: blue;
}

div.justified {
    display: flex;
    justify-content: center;
}
div.titleText {
    font-size: 20px;
    justify-content: center;
    text-align: center;
    margin: 5px;
    font-family: myFourthFont;
}

.submitButton {
    //margin: 0;
    border-radius: 0;
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 50%;
    height: 44px;
    border-top: 0.55px solid #dbdbdf;
    font-size: 18px;
    color: #FFF;
    background-color: #005AAA;
    font-family: myFourthFont;
    padding: 0px;
    margin-top: 15px;
}

rate.html

<ion-content padding no-bounce>
  <div class="titleText">How would you like to rate me?</div>
  <!-- <ionic3-star-rating activeIcon="ios-star" defaultIcon="ios-star-outline" activeColor="#488aff" defaultColor="black"
    readonly="false" [rating]="rating">
  </ionic3-star-rating> -->
  <div class="justified">
    <textarea rows="4" cols="50" [(ngModel)]="userComment" (input)="onUpdateTextArea($event)" placeholder="How can I assist you further?"></textarea>
  </div>

  <button ion-button full small (click)="dismiss()" class="submitButton">
    Submit
  </button>
</ion-content>

rate.ts file

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ViewController } from 'ionic-angular';
import { StarRatingModule } from 'ionic3-star-rating';

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

@IonicPage()
@Component({
  selector: 'page-rate',
  templateUrl: 'rate.html',
})
export class RatePage {

  constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController) {
  }

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

  dismiss() {
    this.viewCtrl.dismiss()
  }

  onUpdateTextArea(event:any) {
    var userComment = (<HTMLInputElement>event.target).value;
    console.log(userComment);
  }
}

Above code will help to get exact issue mentioned in the screen.
If .modal-wrapper height is 100% then page is not scrolling.
Please suggest how can I achieve expected result.

Posts: 1

Participants: 1

Read full topic

@Jameeshpm wrote:

How can I scroll content on keyboard open, My textbox get covered with Keyboard when it is open,

Posts: 1

Participants: 1

Read full topic

@amralaa10 wrote:

how to change the value text color and the arrow color in ion-select v4 ?

I tried the --color variable but it doesn’t work

ion-select {
    width: 100%;
    max-width: 100%;
    --color: #7044ff!important;
}

and select-text class as well didn’t work

.select-text {
font-size: 17px!important;
color: #7044ff!important;
}

Posts: 1

Participants: 1

Read full topic

@AdamGelineau wrote:

Hi guys,

I’m creating a chat app with Ionic 4, and I’m using OneSignal to send push notifications to users when a new message is received.
The notification is created on a Symfony backend, everything’s fine, notifications are sent and well received by my users.
Problem is, when I click on a notification, I want to go on my chat between me and the user who sent a message, and see the last message he sent, obviously.
When I click on the notification, my app is running on background.

I have 2 cases, one working and one not:

1. Working case: When I was using the app and left it, I wasn’t on the Chat page.
2. Not working case: When I was using the app and left it, I was on the Chat page. In that case, my app opens but I can’t see the last message sent to me (the one in the notification).

I used Events to manage all of this:

app.component.ts:

      this.oneSignal.handleNotificationOpened().subscribe(jsonData => {
        if (jsonData.notification.payload.additionalData.notificationType === 'newChatMessage') {
          this.events.publish('newMessageChat', jsonData.notification.payload.additionalData.content);
          this.router.navigate(['/chat/' + jsonData.notification.payload.additionalData.content.userFrom.id]);
        }
      });

chat.page.ts:

ionViewDidEnter() {
    this.getContactInfos();
    this.getUser();
    this.getMessages();

    this.events.subscribe('newMessageChat', (message) => {
      const msgs = [];
      msgs.push(message);
      this.messages.forEach(msg => {
        msgs.push(msg);
      });
      this.messages = msgs;
      setTimeout(() => {
        this.updateScroll();
      }, 200);
    });
  }

  ionViewWillLeave() {
    this.events.unsubscribe('newMessageChat');
  }

If I console.log('test'); in my event subscription, I see it on my 2 cases. But in case 2., my page isn’t moving, the last message isn’t showing.

Anyone who had this problem before to help me a bit please ?
Thanks guys !

Posts: 1

Participants: 1

Read full topic

@lucaslivingnet wrote:

I’m uploading an ionic v4 application to play store and apk upload, I have this error:

• Your APK or Android App Bundle uses permissions that require a privacy policy: (android.permission.READ_PHONE_STATE).

I’ve seen several ideas on how to work on native android, but not on ionic framwork. Any suggestion?

Posts: 1

Participants: 1

Read full topic

@gdii wrote:

Hello, I want to use custom animations on Ionic 4 and for that I need to disable the default ones. I already put animated=false in the ion-router-outlet but the screen keeps blinking (only on iOS and Safari, on chrome all works fine) on the end of the back transition. My goal is to use @angular/animations to do the transition. You can see the problem here: https://giphy.com/gifs/Zb6YrET2x2jaRy2bZm
Also, i am using @angular/router for the routing.

Posts: 1

Participants: 1

Read full topic

@RobertoTsvetanov wrote:

Hey guys, currently i tried :

Local Notificatios but with this plugin i’m able to get only notifications with on local device. Don’t really like it.
Firebase from ionic-native - well i was not able to make it thru. There is some serious issues with this plugin for ios and android.
Firebase messaging plugin - it keeps adding same libraries which i need to exclude from my bundle

With both Firebase plugins on iOS emulator the app is not working. No errors, just when the app start it closes automatically.

I’m going to try FCM at the moment.

So, what’s the best plugin for push notifications with Firebase Cloud. I don’t think there is a topic like this one here so, don’t just say the name of the plugin, say why.

Thanks.

Posts: 1

Participants: 1

Read full topic

@carlossotter wrote:

Hello, I have this big problem to install it, I do not generate the apk, or snatched me or the release of several versions and continues with the same problem, poll with ionic 3 and ionic 4 and does not generate the apk in any of the versions. I want to completely erase my computer to reinstall. Can anybody help me.

Posts: 1

Participants: 1

Read full topic

@Abderrahmane1 wrote:

Hey guys , I’m still new in ionic and I follow every step , I reed all the comments but still give this error,
what caused the problem?Thank you all!

image.png1364×590 19.6 KB

--****************************
app-routing.module.ts

import { NgModule } from ‘@angular/core’;
import { PreloadAllModules, RouterModule, Routes } from ‘@angular/router’;

const routes: Routes = [
{ path: ‘’, loadChildren: ‘./pages/login/login.module#LoginPageModule’ },
{ path: ‘tabs’, loadChildren: ‘./tabs/tabs.module#TabsPageModule’ },

];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}

login.page.html

login Navigate to tabs

---

login.page.ts

import { Component, OnInit } from ‘@angular/core’;
import { Router } from ‘@angular/router’;

@Component({
selector: ‘app-login’,
templateUrl: ‘./login.page.html’,
styleUrls: [’./login.page.scss’],
})
export class LoginPage implements OnInit {

constructor(private router: Router) { }

ngOnInit() {
}

async navTabs() {
this.router.navigateByUrl("/app/tabs/(traveaux:traveaux)");
}
}

---

tabs.page.html

Traveaux

<ion-tab-button tab="personnels" href="/app/tabs/(personnels:personnels)">
  <ion-icon name="contacts"></ion-icon>
  <ion-label>personnels</ion-label>
</ion-tab-button>

<ion-tab-button tab="messages" href="/app/tabs/(messages:messages)">
  <ion-icon name="chatboxes"></ion-icon>
  <ion-label>Messages</ion-label>
</ion-tab-button>

<ion-tab-button tab="plus" href="/app/tabs/(plus:plus)">
  <ion-icon name="settings"></ion-icon>
  <ion-label>Plus</ion-label>
</ion-tab-button>

---

tabs.router.module.ts

import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;
import { TabsPage } from ‘./tabs.page’;

const routes: Routes = [
{
path: ‘tabs’,
component: TabsPage,
children: [
{
path: ‘traveaux’,
children: [
{
path: ‘’,
loadChildren: ‘…/traveaux/tab1.module#Tab1PageModule’
}
]
},
{
path: ‘personnels’,
children: [
{
path: ‘’,
loadChildren: ‘…/personnels/tab2.module#Tab2PageModule’
}
]
},
{
path: ‘messages’,
children: [
{
path: ‘’,
loadChildren: ‘…/messages/tab3.module#Tab3PageModule’
}
]
},
{
path: ‘plus’,
children: [
{
path: ‘’,
loadChildren: ‘…/plus/tab4.module#Tab4PageModule’
}
]
},
{
path: ‘’,
redirectTo: ‘/tabs/traveaux’,
pathMatch: ‘full’
}
]
},
{
path: ‘’,
redirectTo: ‘/tabs/traveaux’,
pathMatch: ‘full’
}
];

@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}

Thank you a lot

Posts: 1

Participants: 1

Read full topic

@calebpitman2 wrote:

How is the mode supposed to be changed with vanilla JS?

The docs show how to do it with angular: https://ionicframework.com/docs/utilities/config#config-options

Posts: 1

Participants: 1

Read full topic

@lily28 wrote:

Hi, is it possible to make the text and button in

in home page disappear after i’m adding a new item in new-item page in ionic 4?

Capture.PNG384×598 9.37 KB

Capture2.PNG382×558 8.46 KB

I want the text welcome, let’s get started and the button below disappear after user click the create button in the newchild page. Can someone help me with this? Here is the code :

home.html
<ion-header>
  <ion-toolbar>
    <ion-title>Dashboard</ion-title>
    <ion-buttons slot="end">
      <ion-button [routerLink]="['/addchild']">
        <ion-icon slot="icon-only" name="add"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-item>
        <ion-label>Search</ion-label>
        <ionic-selectable item-content [(ngModel)]="port" itemValueField="id" itemTextField="name" [items]="ports" [canSearch]="true"
            (onChange)="portChange($event)">
          </ionic-selectable>
    </ion-item>

  <section class="ion-padding-top" text-center>
    <div><br><br><br><br><br><br><br><br><br>
    <h1 style="font-size:1.4em" ion-margin>Welcome, let's get started !</h1><br>
    <ion-button (click)="myAction()" fill="outline" color="secondary-shade" shape="round" class="my-action-button" routerLink="/addchild">Add your first child's profile</ion-button>
    </div>
  </section>
  </ion-content>

newchild.html

<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start" defaultHref="/tabs/childdetails">
        <ion-back-button></ion-back-button>
      </ion-buttons>
    <ion-title>New Child</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <form [formGroup]="new_child_form" (submit)="createChild(new_child_form.value)">
        <ion-item>
          <ion-label position="floating">Child Name</ion-label>
          <ion-input type="text" formControlName="childname" required></ion-input>
        </ion-item>

        <ion-item>
            <ion-label position="floating">Display Name</ion-label>
            <ion-input type="text" formControlName="childnickname" required></ion-input>
        </ion-item>

        <ion-item>
          <ion-label>Gender</ion-label>
            <ion-select id="gender">
              <ion-select-option value="g">Girl</ion-select-option>
              <ion-select-option value="b">Boy</ion-select-option>
            </ion-select>
        </ion-item>

        <ion-item>
            <ion-label>Date</ion-label>
            <ion-datetime display-format="DD MMM YYYY"></ion-datetime>
        </ion-item>

        <ion-button class="submit-btn" expand="block" type="submit" [disabled]="!new_item_form.valid">Create</ion-button>
    </form>
  </ion-list>
</ion-content>

Posts: 1

Participants: 1

Read full topic

@JohnCressman wrote:

I created a movie app from a youtube tutorial. It uses APIs to communciate with a movie api via httpclient.

The app worked fine with ionic serve and ionic lab. I tried to create a debug of it on my phone but it didn’t work. I posted here but it the bot flagged it as spam… so waiting.

I added the cordova whitelist plugin in the meantime.

Now something has happened and it still loads the APK to the phone but will not launch. I don’t know what’s wrong. I even removed and re-added the android platform. Still nothing. the app when manually launched says This app keeps closing and it won’t launch.

Any ideas? Please.

Posts: 1

Participants: 1

Read full topic

@JohnCressman wrote:

I’m still working on getting my movie database application working and I found out how to remotely view the error messages on the app in Chrome, so now I see as I type and the server is called, I get the following error message:

GET http://www.omdbapi.com/?s=Bat&type=&apikey=999999 net::ERR_CLEARTEXT_NOT_PERMITTED

It appears that this should be able to be solved by putting a line in the Android Manifest file, which I should be able to do by adding the following line to the config.xml

android:usesCleartextTraffic="true"

Which I did (see below)

        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
            <application android:networkSecurityConfig="@xml/network_security_config" />
            <application android:usesCleartextTraffic="true" />
        </edit-config>

I’m still getting the error message however, even after re-deploying and reconnecting the debugging.

Anyone have any experience on how to solve this issue on Android?

Posts: 1

Participants: 1

Read full topic

@faizan1990 wrote:

Hi, I am working on an Ionic app where I am using a hotspot plugin to scan available WiFi WAPs around me. My app runs the scan every second. However, on Android Pie (Security Patch 5 May 2019), after scanning for first few seconds, the app doesn’t seem to detect any WAPs.

Leaving the app for a few seconds makes it detect WAPs again but this time also for a few seconds before it dies again until next time.

This has been tested on different devices with Android Pie and the behaviour is same. However, when I test it on any Android version other than Android Pie, it works fine; i.e. it keeps updating the scan every second and give me the scan results as expected. My question is: Is there anything in Android Pie that is stopping my app to scan available WAPs every second?

Posts: 1

Participants: 1

Read full topic

@noctis03 wrote:

I’m still new in using Ionic. I want to show a submit button only when one or more option is selected. My code goes like this

  <ion-card>
     <ion-item>
     <ion-icon name="trash" slot="start"></ion-icon>
     <ion-select id="dispose" multiple="true" placeholder="What to dispose?" >
        <ion-select-option value="Biodegradable">Biodegradable</ion-select-option>
        <ion-select-option value="Non-biodegradable">Non-biodegradable</ion-select-option>
        </ion-select>
     <ion-icon name="notifications" slot="end"></ion-icon>
     </ion-item>
  </ion-card>

<ion-button  color="success">Submit</ion-button>

Posts: 2

Participants: 2

Read full topic

@adkMohit wrote:

I’m Trying to be able to browse a website in chrome and send that url to my ionic android app?
how i can do that?

Posts: 1

Participants: 1

Read full topic