@raviteja0168 wrote:

HI every one,

I have leadbolt app sdk or some native sdk. how I can add to my ionic project?

Posts: 1

Participants: 1

Read full topic

@philippgsk wrote:

Hello there,
I would like to outsource my Front-End to a specific Front-End developer. Is it possible to build an ionic App just with HTML 5 and SCSS? So he don’t need to learn everything about ionic and its components. What are the benefits of using the ionic components and disadvantage not using them ?

Thanks

Posts: 1

Participants: 1

Read full topic

@pratibhapanch wrote:

I wanted to use camera plugin in my app. I requested camera permission, but after allowing camera is not opening

Trying it on Following device

• Moto g4 plus
  with android version 7.0

Following is Ionic info
cli packages: (C:\Users\username\AppData\Roaming\npm\node_modules)
@ionic/cli-utils : 1.19.3
ionic (Ionic CLI) : 3.20.1
global packages:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
local packages:
@ionic/app-scripts : 3.2.0
Cordova Platforms : android 7.0.0 browser 5.0.4
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 25.2.5
Node : v8.11.1
npm : 5.6.0
OS : Windows 10
Environment Variables:
ANDROID_HOME : C:\android-sdk-win
Misc:
backend : pro

Following is my code

openCamera(){

	this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA).then(
		result => {
			alert(result.hasPermission);
			if(!result.hasPermission) {
				this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA)
				.then( cam => {
					alert('permission result '+ JSON.stringify(cam) );
					this.capturingPicture();
				})
				.catch( error => {
					alert('permission error occured '+ JSON.stringify(error) );
				});
			} else {
				this.capturingPicture();
			}
		},
		err => {
			this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA); 
		});
}

capturingPicture alert is displaying but device camera is not opening.

capturingPicture(){
	alert('capturingPicture');

	const options: CameraOptions = {
		mediaType: this.camera.MediaType.PICTURE,
		quality : 75, 
                   destinationType : this.camera.DestinationType.DATA_URL, 
                   sourceType : this.camera.PictureSourceType.CAMERA, 
                  allowEdit : true,
                  encodingType: this.camera.EncodingType.JPEG,
                  targetWidth: 300,
                  targetHeight: 300,
                 saveToPhotoAlbum: false
	};
	  
	this.camera.getPicture(options).then((imageData) => {
		let base64Image = 'data:image/jpeg;base64,' + imageData;
		alert('image data => '+ imageData);
	}, (err) => {
		// Handle error
		alert('get picture error => '+ err);
	});
}

As per documentation, wrote code, but still not getting whether it is code/plugin/verions/OS etc issue.
Please guide me with this.

thank you.

Posts: 1

Participants: 1

Read full topic

@IreneC wrote:

Hi everyone,

I am working with the component infinite scroll and sometimes it doesn’t work (don’t appear and scroll) when I know there are more results to show.

What can be happening?

Thank you very much in advance.

Posts: 1

Participants: 1

Read full topic

@viraj28 wrote:

I made an ionic application. But now I need a widget. So I import the ‘platform/android’ folder in android studio after doing ‘ionic cordova build android’ command.

I made a widget. But now I need to access some variable values from my TypeScript code of Ionic.

What I see is, there’s an assets folder inside which is ‘www’ which contains ‘main.js’.

Now this ‘main.js’ has some of my code but Ionic did some Magic on it

How can I access these variable so that I can Populate my Widgets items? Also is this the right way?
How do I build APK using Ionic commands after doing changes in Android Studio? Will everything get overwritten?

Posts: 1

Participants: 1

Read full topic

@ciekawy wrote:

Hey there!

while preparing to upgrade to ionic 4 I got surprised seeing mock-providers are gone in @ionic/angular (starting from most basic MockPlatform. While reading that upgrading to 4 should be seamless start to wonder if I am missing something? as was unable to google anything related to mocks and Ionic 4…

Posts: 1

Participants: 1

Read full topic

@brune83 wrote:

Hi everybody!
Can you please tell me how to upgrade my app from v4.0.0 to v4.0.1?
Thank you very much!

Posts: 2

Participants: 2

Read full topic

@javiersoto1797 wrote:

Hey guys, i need to create two applications that are connected to each other. One is mobile and the other one is web only, the idea is that the administrator app can move and manage data that then the users will see in their client app. So they need to share the same database(Firebase)
Is there any way that i can do it on Ionic? and if is there any good guide or blog for it. Thanks

Posts: 3

Participants: 3

Read full topic

@wiloooo wrote:

Hello, I have a problem that I can not solve. My v4 ionic application works great with ngx.socket.io locally and on my device.
Nevertheless, after having built --prod - on the connection is blocked, I can not even debug and know why I’m here all there is to do … How to do?

I connect to an external node.js server to my application, I do not see why I connect to an external node.js server to my application, I do not see why with “run android” it works and after the build everything is blocked

thank you for your help
(sorry for my english i’m french =))

Posts: 1

Participants: 1

Read full topic

@phongbn96 wrote:

i am using geolocation to get GPS curent but it not working in android . It run very good in IOS and windown

Posts: 2

Participants: 2

Read full topic

@Mr-Peanutbutter wrote:

I keep getting an error when i try to use some of the components in ionic 4. and a few others cause the error. Whats wrong? is there something I’m missing?

Posts: 1

Participants: 1

Read full topic

@jachno wrote:

I originally posted this on stackoverflow, forgot to check if there was an ionic forum.

I am creating a mobile application using vuejs and ionic capacitor. I am not able to use v-model to bind to ION components it looks like I am able to use regular HTML components such as input and button

<ion-input type="text" :value="email" @input="email = $event.target.value" placeholder="Username"></ion-input>

vs

  <input type="text" v-model ="username" placeholder="Username"></ion-input>

Apart from having to craft the styling myself, is there any other downside I am missing. The app appears to run fine on native ios and Android devices.

Posts: 1

Participants: 1

Read full topic

@hpjalbuna wrote:

The user is supposed to look for available parking spaces by filling out some information, and then they must click a button to invoke a function. Afterwards, the results are stored inside an array and should be displayed in ion-cards. I want all of these to occur within the same page, but I don’t know how to load the ion-cards after the array has been populated.

My code below:
reserve.html

<ion-content padding>
  <ion-list>  
    <ion-item>
      <ion-label>Start Time: </ion-label> <ion-datetime [(ngModel)]="reservation.start" pickerFormat="hh:mm A"></ion-datetime>
    </ion-item>
    <ion-item>
      <ion-label>End Time: </ion-label> <ion-datetime [(ngModel)]="reservation.end" pickerFormat="hh:mm A"></ion-datetime>
    </ion-item>
    <ion-item>
      <ion-label>Nearest to: </ion-label>
      <ion-select [(ngModel)]="category" multiple="False">
        <ion-option *ngFor="let cat of categories" value="{{cat}}">{{ cat }}</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>
 
  <button ion-button (click)="findSpace(category, start, end)">Find a space</button>

  <ion-card *ngFor="let space of spaces">
    <ion-card-header>
      <ion-title>{{space}}</ion-title>
    </ion-card-header>
    <ion-card-content>
        <button ion-button clear right color="default" (click)="reserveSpace()" ngDefaultControl>Select space</button>
      </ion-card-content>
  </ion-card>
</ion-content>

reserve.ts

findSpace(category: string, start: string, end: string){
    console.log("in");
    var spaces = new Array();
    const spaceRef: firebase.database.Reference = this.afDatabase.database.ref(`spaces`);
    const reservationRef: firebase.database.Reference = this.afDatabase.database.ref(`reservations`);
    var startTime = moment(start, 'hh:mm');
    var endTime = moment(end, 'hh:mm');

    var promise = new Promise((resolve, reject) => {
      this.afDatabase.database.ref(`categories/${category}`).orderByValue().on('value', function(snapshot){
        snapshot.forEach(function(data){
          if(data.val() === true){
            reservationRef.child(data.key).orderByKey().on('value',function(snapshot){
              // console.log("we here");
              snapshot.forEach(function(childSnapshot){
                var bookingData = childSnapshot.val();
                if(!startTime.isBefore(bookingData.start, bookingData.end)){
                  spaces.push(snapshot.key);                
                  resolve();
                }
              });
            });
          }
        });
      });
    });

    return promise;
    
  }

I am still quite new to this so suggestions are welcome.

Posts: 1

Participants: 1

Read full topic

@darrenM96 wrote:

I have been creating a simple ionic app, using firebase as my login and database. i have been following this video https://www.youtube.com/watch?v=uESqBwFVf1Q . Once I get to the end I have no errors happening but my database doesntstore the information the way his does. I think I missed something simple in setting up the database but im not sure what?

HTML file:

<!--
  Generated template for the ProfilePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Profile</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>


<ion-item>
<ion-label floating>UserName</ion-label>
<ion-input> [(ngModel)]="profile.username"</ion-input>
</ion-item>


<ion-item>
<ion-label floating>First Name</ion-label>
<ion-input> [(ngModel)]="profile.firstname"</ion-input>
</ion-item>

<ion-item>
<ion-label floating>Last Name</ion-label>
<ion-input> [(ngModel)]="profile.lastname"</ion-input>
</ion-item>

<button ion-button clear block (click)="createProfile()">Create Profile</button>
</ion-content>

TS file:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HomePage } from '../home/home';
import { AngularFireAuth } from "angularfire2/auth";
import { AngularFireDatabase } from "angularfire2/database"; 
import { Profile } from '../../models/profile';
/**
 * Generated class for the ProfilePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

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

profile = {} as Profile;
  constructor(private  afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase, public navCtrl: NavController, public navParams: NavParams) {
  }

//check `` and ''
createProfile(){
	this.afAuth.authState.take(1).subscribe(auth=> {
		this.afDatabase.object(`profile/${auth.uid}`).set(this.profile) 
	 	.then(() => this.navCtrl.setRoot(HomePage));
	})
}

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

}

Any ideas what I could do to solve this issue?

Posts: 1

Participants: 1

Read full topic

@conexcol wrote:

I have an Ionic4 + capacitor (just for camera in PWA) and after I build it for production, it won’t work on Firefox. It does work fine on the rest of the browsers.

In order to make the camera work in a browser, I had to use capacitor and include: " <script src=“https://unpkg.com/@ionic/pwa-elements@1.0.0/dist/ionicpwaelements.js”></script> " in the index.html

1. Ionic4 app
2. Make capacitor available (npx cap init)
3. Include the ionicpwaelements.js in the index.html
4. ion build --prod
5. Upload it
6. Open in the browser… it works in Chrome and Safari, won’t work in Firefox.

The error Firefox throws:

This Stencil app is disabled for this browser.

Developers:

• ES5 builds are disabled during development to take advantage of 2x faster build times.
• Please see the example below or our config docs if you would like to develop on a browser that does not fully support ES2017 and custom elements.
• Note that by default, ES5 builds and polyfills are enabled during production builds.
• When testing browsers it is recommended to always test in production mode, and ES5 builds should always be enabled during production builds.
• This is only an experiement and if it slows down app development then we will revert this and enable ES5 builds during dev.

Enabling ES5 builds during development:

npm run dev --es5

For stencil-component-starter, use:

npm start --es5

Enabling full production builds during development:

npm run dev --prod

For stencil-component-starter, use:

npm start --prod

Current Browser’s Support:

• ES Module Imports: true
• ES Dynamic Imports: false
• Custom Elements: true
• Shadow DOM: true
• fetch: true
• CSS Variables: true

Current Browser:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:65.0) Gecko/20100101 Firefox/65.0

---

Posts: 1

Participants: 1

Read full topic

@crazydeveloper wrote:

Hey guys am developing a multi dir application i have an issue to change side menu direction without refreshing app:

this is my app.html:

<ion-menu [content]="content" type="overlay" [attr.side]="dir==='ltr'?'left':'right'">
    <ion-header>
        <ion-toolbar>
        <ion-title>Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <button ion-item>
                Home
            </button>
            <button ion-item>
                Friends
            </button>
            <button ion-item>
                Events
            </button>
            <button ion-item>
                Close Menu
            </button>
        </ion-list>
    </ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content></ion-nav>

and this is my app.components.ts

dir: string;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, translate: TranslateService, storage: Storage, multi: MultilangProvider) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      storage.get('dir').then((val) => {
        multi.currentDirection();//i call this provider method to get dir //equivalent to platform.get..
        setTimeout(()=>{
          this.dir = multi.currentdir; //dir (rtl or ltr)
        },100)
      });
      
    });
  }

it works but i have to refresh app to load new direction from storage. i’ve tried to access platform.dir() from html but it give undefined. Help please.

*i dont want to use two side menus for each language i want to reuse the same.

Posts: 1

Participants: 1

Read full topic

@zabka229 wrote:

Hello, recently I am trying new Ionic 4 combined with react framework.
I have a simple problem. I can’t customize ion-slides with my options.

Code is simple as that:

class Project extends Component {

    constructor() {
        super();
        this.options = {
            speed: 400,
            spaceBetween: 100,
            effect: 'fade'
        }
    }

    render() {
        return (
            <ion-slides options={this.options}>
                <ion-slide>
                    <img src={slide} />
                </ion-slide>
                <ion-slide>
                    <h1>Slide 2</h1>
                </ion-slide>
                <ion-slide>
                    <h1>Slide 3</h1>
                </ion-slide>
            </ion-slides>
        );
    }
}

It just ignores every option property and show basic slides.

Posts: 1

Participants: 1

Read full topic

@heidji wrote:

Hey guys,

I published a component that enables hardware accelerated navbar auto-hide animations and it is barely tested but the installation works on existing projects so I would like to announce it here to get some primary feedback if you’re interested.
I’m not sure if this plugin would work on Ionic 4 but I don’t think it would be hard to make it compatible.

Posts: 1

Participants: 1

Read full topic

@rbender wrote:

We’re using Ionic v4 in our Angular app and wanting to integrate Google Analytics. I am confused on which is the best Google product to use, specifically between Google Analytics and Firebase. Since the app is web based, I’m not sure if I should create a normal site tracking in GA or a “mobile app.” Then once I have the Google part set up, do I use normal tracking code in my app or use a plugin like google-analytics-plugin?

If I should create a mobile app, it looks like I need to set up Firebase for the app. Does anyone have recommendations on the steps to do this? I’m not sure where I would get the tracking IDs, and if I need to create separate Firebase apps for different platforms?

I’d appreciate any help. Thanks!

Posts: 1

Participants: 1

Read full topic

@victor10acp wrote:

Image.jpg750×1334 171 KB

Posts: 1

Participants: 1

Read full topic