Hi, I am wondering if there are any resources to implement push notifications with Firebase in a Vue app. So far I have found the Angular guide, but I was wondering if there are any similar guides using Vue. There is a post on Medium by user Itachi Uchicha here but it isn’t all that clear. Thank you for your help.
1 post - 1 participant
Im attempting to use the web components from @ionic/core and I ran into some weird behavior. I am building my own framework and wanted to see how ionic worked with it. I noticed that some components such as ion-app and ion-card are injecting style elements as siblings. Since the style elements are not in the template my diffing logic removes them. this as expected breaks the styles of the components.
Is there a way to prevent this from happening? Im also curious as to what the use case is for having the styles as siblings instead of child elements.
I have tried using components from the CDN as well as the web components in the @ionic/core package.
1 post - 1 participant
Hi all!
I’m trying to disable the history in my ion-nav’s stack, and I saw that the only way to do it is by removing the previous indexes. Am I right?
Right now I have it implemented in a very manual way, as I’m just doing removeIndex(2) (as the index 1 is the root page), because I cannot get the active index via getActive(), as it returns a Promise and I don’t know how to obtain the current index from it.
Besides, I’ve noticed that the removed views “remain” somehow alive, because in the ion-nav stack I can see as many div’s as views the stack has had, apart from the active one. I attach an image so you can see the behaviour:
What is the explanation of this behaviour? Does anyone know the best way to only have the active view in the stack?
Thank you in advance!
1 post - 1 participant
Ion Infinite Scroll has something like this where it can load more data when you reach the bottom of the dataset:
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
Does Ion Virtual Scroll have anything similar? If not, what would be a way to implement such a feature where a user gets to the bottom of the dataset for Virtual Scrolling, and then it loads more data similar to the Infinite Scrolling.
1 post - 1 participant
I am not sure how to set the Admob ID for the capacitor version of the Admobp-free plugin.
The readme of the package refers to config.xml / the Cordova way and config.xml is not in the cap project? (iOS works fine)
I know this is a question about a 3rd party lib, but please, any help is welcome 
I’m bit confused overall that the capacitor documentation is so sparse whether I am betting on the right horse here.
1 post - 1 participant
Let’s be naughty tonight. Can you agree with me, if Yes, then come to hire me in Chandigarh Escorts , I am desperately waiting for you and want to taste your naughty feelings which should enhance my current sexual power . I want to be your blowjob queen and you can touch my private parts, when we meet then, we can do anything with me whatever you want. I give you my erotic and sensual session that I give only my special clients this kind of service and you will never be disappointed by my any performance you’ll definitely love it, now I am too excited to show you my passionate love power and tell you how good I am in sex but when I perform front of you, you’ll know yourself. I am a very open-minded girl who always explores everything and is never shy to share anything with my client that’s why they love to go back here again and again. Don’t give up for you boring sex partner just come and get some freshness in your sex and modify your love making session. I’m always ready to give you everything which you have been searching for your whole life with your female partner, but they never give you that kind of satisfaction so come to hire some new Call girls in Chandigarh .
1 post - 1 participant
Hi There,
I would like to know how to use the getSelected() method in tabs. The docs do mention this method but an example can’t be found.
My code thusfar looks like this:
<template>
<ion-page>
<ion-tabs @ionTabsDidChange="testIt()">
<ion-tab-bar>
<ion-tab-button tab="ads" href="/suite/ads/categories" selected>
<ion-icon :icon="tvOutline" />
<ion-label color="light">1</ion-label>
</ion-tab-button>
<ion-tab-button tab="hub" href="/suite/hub">
<ion-icon :icon="bagHandleOutline" />
<ion-label color="light">2</ion-label>
</ion-tab-button>
<ion-tab-button tab="user" href="">
<ion-icon :icon="personOutline" />
<ion-label color="light">3</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-page>
</template>
My JS Looks like this:
export default {
name: 'suite',
data() {
return {
tvOutline,
storefrontOutline,
personOutline,
bagHandleOutline
};
},
methods: {
testIt() {
//how to use getSelected()?
console.log('test')
}
},
components: {
IonTabs,
IonTabBar,
IonTabButton,
IonIcon,
IonPage,
IonLabel
},
};
In the testIt() function I would like to know how I can reach the getSelected method.
Any thoughts?
3 posts - 2 participants
Hello guys, I am building a video sharing app with ionic, I want to be able to edit videos like cut videos if it is more than a minute with ionic
And also be able to add slide so I can choose from where I want to start cutting the video from but it cant be more than two minutes, will it be possible with ionic
1 post - 1 participant
Nalanda College Biharsharif is situated in the heart of the town, facing the Law courts of Biharsharif. The location of the college was influenced of course by the land owned by Rai Bahadur Edal Singh, but the site was chosen also to facilitate the reach of the students to the college.
1 post - 1 participant
Hello. I am working on a small application with ionic and laravel (with an API). I would like to put data in my popover and recover it.
Here is my visitorPage
`import { Storage } from ‘@ionic/storage’;
import { ApiServiceService } from ‘./…/providers/api-service.service’;
import { PoperinfoComponent } from ‘./…/poperinfo/poperinfo.component’;
import { Component, OnInit } from ‘@angular/core’;
import { ToastController, LoadingController, NavController, AlertController, ActionSheetController, ModalController } from “@ionic/angular”;
import { PopoverController } from ‘@ionic/angular’;
@Component({
selector: ‘app-visiteurs’,
templateUrl: ‘./visiteurs.page.html’,
styleUrls: [’./visiteurs.page.scss’],
})
export class VisiteursPage implements OnInit {
TOKEN_KEY = ‘api_token’;
visitors :any;
visitor = {id:’’,customer_id:’’ ,name:’’, mail:’’,phone:’’}
constructor(
public actionSheetController: ActionSheetController,
public alertCtrl: AlertController,
public modalCtrl: ModalController,
private loadCtrl: LoadingController,
private navCtrl: NavController,
private apiService: ApiServiceService,
public popoverController: PopoverController,
private storage: Storage) {}
ngOnInit() {
}
async presentPopover(ev: any) {
const popover = await this.popoverController.create({
component: PoperinfoComponent,
cssClass: ‘my-custom-class’,
event: ev,
componentProps:{key1:this.visitors },
mode:‘md’
});
return await popover.present();
}
}
//And here is my popover page
import { NavController } from ‘@ionic/angular’;
import { Storage } from ‘@ionic/storage’;
import { ApiServiceService } from ‘./…/providers/api-service.service’;
import { Component, OnInit } from ‘@angular/core’;
import { ToastController, LoadingController, AlertController, ActionSheetController, ModalController } from “@ionic/angular”;
import { NavParams } from ‘@ionic/angular’;
import { PopoverController } from ‘@ionic/angular’;
@Component({
selector: ‘app-poperinfo’,
templateUrl: ‘./poperinfo.component.html’,
styleUrls: [’./poperinfo.component.scss’],
})
export class PoperinfoComponent implements OnInit {
TOKEN_KEY = ‘api_token’;
visitors:any
visitor = {id:’’,customer_id:’’ ,name:’’, mail:’’,phone:’’}
constructor(
private navParams: NavParams,
public popoverController: PopoverController,
public navCtrl: NavController,
public actionSheetController: ActionSheetController,
public alertCtrl: AlertController,
public modalCtrl: ModalController,
private loadCtrl: LoadingController,
private apiService: ApiServiceService,
private storage: Storage) { }
ngOnInit() {
console.log(this.navParams.data);
}
}
1 post - 1 participant
Telstra Bigpond email is a reliable webmail service provided by Telstra to its users. Even telstra has the technical support team for providing technical support services to its Bigpond email users. the e-mail platform is extremely easy to use and value effective too.
A user will simply navigate their email platform and simply will do send or receive email messages. Moreover, Bigpond email support provides the most effective services and support. In some things Bigpond email user grind to a halt whereas exploitation Bigpond email. currently the Third Party Bigpond email support comes in to existence and provides glorious services to the users. but all the services ar provided by Bigpond email support team ar terribly price effective.
3 posts - 3 participants
I’m trying to paginate data from API, the API is not paginated cause I want to perform that only on the app. With the code below it doesn’t do any pagination but when all products are shown (30products) it does make a useless load. I can’t seem to fix it. Hope u guys can help me. Thanks in advance!
API request
//Get All the Products
app.get('/products', (_req, _res) => {
mysqlConnection.query('SELECT * from Products', (err, rows, _fields) => {
if (!err)
_res.send(rows);
else
console.log(err);
})
});
Service
getALLProduct(){
return this.http.get("http://localhost:3000/products")
}
I’m trying to paginate data from API, the API is not paginated cause I want to perform that only on the app. With the code below it doesn’t do any pagination but when all products are shown (30products) it does make a useless load. I can’t seem to fix it. Hope u guys can help me. Thanks in advance!
API request
//Get All the Products
app.get('/products', (_req, _res) => {
mysqlConnection.query('SELECT * from Products', (err, rows, _fields) => {
if (!err)
_res.send(rows);
else
console.log(err);
})
});
Service
getALLProduct(){
return this.http.get("http://localhost:3000/products")
}
Html
<ion-list>
<ion-grid style="margin: 0%">
<ion-row>
<ion-col size="6" *ngFor="let item of posts" >
<ion-card >
<div style="position: relative;">
<ion-card-title >{{item.Name}} </ion-card-title>
</div>
</ion-card>
</ion-col>
</ion-row>
<ion-infinite-scroll threshold="150px" (ionInfinite)="loadMorePosts($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-grid>
</ion-list>
Module .ts
posts: any[] =[];
totalPosts = 0;
limit = 10;
loading: any;
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
constructor(
public api:ApiService,
public loadingController: LoadingController,
) {}
ngOnInit() {
this.getData();
}
async getData() {
this.loading = await this.loadingController.create({
message: 'Please wait...',
spinner: 'crescent',
duration: 2000
});
await this.loading.present();
this.api.getALLProduct().subscribe((res: any[]) => {
this.totalPosts = res.length;
this.module = res.length;
for (let post of res) {
this.posts.push(post);
}
this.hideLoading();
});
}
private hideLoading() {
this.loading.dismiss();
}
loadMorePosts(event) {
setTimeout(() => {
console.log('Begin async operation');
this.limit = 10;
event.target.complete();
if (this.totalPosts < this.limit) {
event.target.disabled = true;
}
}, 500);
}
//
toggleInfiniteScroll() {
this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
}
1 post - 1 participant
Hi All
I am using Ionic 5 and i would like to use the following Capacitor plugin for my BLE application.
BLE Plugin
Has anyone managed to use it successfully?
As I am getting the following error message on a ionic build:
3 import type { BleDevice, BluetoothLePlugin, ConnectOptions, ReadOptions, ReadResult, RequestBleDeviceOptions, WriteOptions } from ‘./definitions’;
node_modules/@capacitor-community/bluetooth-le/dist/esm/bleClient.d.ts:1:13 - error TS1005: ‘=’ expected.
1 import type { PluginListenerHandle } from ‘@capacitor/core’;
~
node_modules/@capacitor-community/bluetooth-le/dist/esm/bleClient.d.ts:1:43 - error TS1005: ‘;’ expected.
1 import type { PluginListenerHandle } from ‘@capacitor/core’;
~~~~~~~~~~~~~~~~~
node_modules/@capacitor-community/bluetooth-le/dist/esm/bleClient.d.ts:2:13 - error TS1005: ‘=’ expected.
2 import type { BleDevice, RequestBleDeviceOptions, ScanResult } from ‘./definitions’;
~
node_modules/@capacitor-community/bluetooth-le/dist/esm/bleClient.d.ts:2:69 - error TS1005: ‘;’ expected.
1 post - 1 participant
I want to return API response JSON into a model class.
Sample code is as follows:
const authenticateUserAsync = async (username: string, password: string) : Promise<UserModel> => {
const loginData = {
"Username": username,
"Password": password
}
const api = axios.create({
baseURL: "https://www.something.com/api/services"
})
const resp = await api.post("/ValidateUserPost", loginData)
if(resp.data != null && resp.data.userId != null && resp.data.userId > 0){
//How to convert the JSON Response to Model Class
return resp.data.map((user: UserModel) => {UserId: user.userId, FirstName: user.FirstName })
}
else
return NULL User Model
};
The model class which I want to return looks as below:
export interface UserModel {
UserId: Number;
CustomerId: number;
FirstName:string;
LastName:string;
}
1 post - 1 participant
Hello,
I’m creating my application with a login page and I have my “Forgotten password ?”.
But I have already tried <p> <a> and <div> with .class, :focus {outline: none} but there is still a yellow square around my item…
I don’t have this problem with my browser, only with my android application…
Someone has a solution about this issue ?
Thank you
1 post - 1 participant
Hey Everyone, I want to build custom camera plugin for my organisation!
can anyone help me:
Here is my code but i can not use in project.
My plugin src/index.ts file
import { Injectable } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { File } from '@ionic-native/file/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';
import { UUID } from 'angular2-uuid';
import { ActionSheetController, Platform } from '@ionic/angular';
@Injectable({
providedIn: 'root'
})
export class CameraProvider {
protected options: CameraOptions;
protected translations = {
cancel: 'Cancel',
picture_library: '',
picture_options : '',
take_picture: '',
};
constructor (private file: File, public platform: Platform, public actionSheetCtrl: ActionSheetController,
public camera: Camera, public sanitizer: DomSanitizer,
private filePath: FilePath) {
console.log('run CameraProvider');
}
// Displays action sheet with options to take a picture or choose one from the photo library
public async savePhoto() {
return new Promise(async (resolve, reject) => {
const sheet = await this.actionSheetCtrl.create({
buttons: [
{
handler: () => {
sheet.onDidDismiss().then(() => {
this.savePicture(0).then((photoUrl) => {
resolve(photoUrl);
});
});
},
text: this.translations.take_picture,
},
{
handler: () => {
sheet.onDidDismiss().then(() => {
this.savePicture(1).then((photoUrl) => {
resolve(photoUrl);
});
});
},
text: this.translations.picture_library,
},
{ text: this.translations.cancel, role: 'cancel' },
],
header: this.translations.picture_options,
});
(await sheet).present();
});
}
// Stores a picture from the camera or photo library in the app data directory. Returns the url of the picture.
private async savePicture(type: number) {
return new Promise((resolve, reject) => {
this.camera.getPicture(this.optionsForType(type)).then((imageUrlToBeNormalized) => {
// Handle cases for different URLs
this.normalizeUrl(imageUrlToBeNormalized, type).then((imageUrl) => {
// Get file name and path
const name = imageUrl.substr(parseInt(imageUrl.lastIndexOf('/'), 10) + 1);
const namePath = imageUrl.substr(0, parseInt(imageUrl.lastIndexOf('/'), 10) + 1);
// Copy file
this.file.copyFile(namePath, name, this.file.dataDirectory, UUID.UUID()).then((file) => {
console.log('copy',JSON.stringify(file));
console.log('file.nativeURL',JSON.stringify(file.nativeURL));
resolve(file.nativeURL);
})
.catch((e) => {
console.log('copyFile',e);
reject(e);
});
});
})
.catch(e => {
console.log('getPicture',e);
});
});
}
// Fixes file paths when the Android Photo Library is used
private async normalizeUrl(uri: string, type: number): Promise<any> {
return new Promise((resolve, reject) => {
if(this.platform.is('android') && type === 1) {
this.filePath.resolveNativePath(uri).then(filePath => {
console.log('normalizeUrl filePath',filePath)
resolve(filePath);
})
.catch(err => console.log('normalizeUrl',err));
} else {
console.log('normalizeUrl filePath uri',uri)
resolve(uri);
}
});
}
// Camera plugin options
private optionsForType(type) {
const defaultOptions = {
allowEdit: this.platform.is('ios') ? true : false,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
saveToPhotoAlbum: false,
sourceType: type === 0 ? this.camera.PictureSourceType.CAMERA : this.camera.PictureSourceType.SAVEDPHOTOALBUM,
};
if (this.options) {
return {...defaultOptions, ...this.options} as any;
} else {
return defaultOptions;
}
}
// Sanitizes profile pictures for display in templates
public getProfileImage(image): SafeStyle {
return this.sanitizer.bypassSecurityTrustStyle(`url(${image ? image : 'assets/default-img'})`);
}
}
when i was trying to import in my ionic cordova project get some error
import { CameraProvider } from ‘@org/camera’;
Get some error like No suitable injection token for parameter ‘CameraProvider’ of class ‘HomePage’.
@Inject(‘CameraProvider’) private CameraProvider: any // not work
HomePage.ts
import { Component,Inject } from '@angular/core';
import { CameraProvider } from '@org/camera';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
@Inject('CameraProvider') private CameraProvider: any
constructor() {
console.log(this.CameraProvider);
}
async addImage() {
const url = await this.CameraProvider.savePhoto(); // not working
}
}
1 post - 1 participant
Hi there
We are creating a framework like ionic with a stenciljs core project and for now angular bindings.
For the start i created a component that works like expected.
Then i created a service in my stenciljs project like so (just like menuController from ionic):
const createMenuController = () => {
const menus: { [key: string]: any } = {};
const get = (key: string): string => { return menus[key] ?? 'Not Set!'; };
const set = (key: string, value: string): void => { menus[key] = value; };
const deleteKey = (key: string): void => { delete menus[key]; };
return { get, set, deleteKey };
};
export const menuController = /*@__PURE__*/createMenuController();
and my angular service binding for this service (just a proxy):
import { menuController } from '@softec-gis/core';
@Injectable({ providedIn: 'root' })
export class MenuController {
get(key: string) { return menuController.get(key); }
set(key: string, value: any) { return menuController.set(key, value); }
deleteKey(key: string) { return menuController.deleteKey(key); }
}
now my problem is i go 2 instances of this service.
one in my stenciljs component
and one in my angular ecosystem.
my tests in ionic and my test app:
Ionic:
window.ngcont = _ionic_core__WEBPACK_IMPORTED_MODULE_5__["menuController"]
window.stj = _index_fbe82773_js__WEBPACK_IMPORTED_MODULE_7__["m"]
ngcont === stj => true
my App:
window.ngcont = _gis_core__WEBPACK_IMPORTED_MODULE_4__["menuController"]
window.stj = _index_f4628f04_js__WEBPACK_IMPORTED_MODULE_1__["m"]
ngcont === stj => false
and it does not matter if i import the menuController directly from @gis/core or with my angular proxy service @gis/angular
window.ngcont = _gis_core__WEBPACK_IMPORTED_MODULE_4__["menuController"]
window.directImp = _gis_core__WEBPACK_IMPORTED_MODULE_1__["menuController"]
window.stj = _index_f4628f04_js__WEBPACK_IMPORTED_MODULE_1__["m"]
ngcont === stj => false
directImp === ngcont => true
directImp === stj => false
I cant find where ionic does something different then me.
Do i have to set some config stuff somewhere ?
1 post - 1 participant
I am new leaner and stuck with below question
I have an array of react components , and wanted to display the components in m X n matrix .
my code details :
<IonRow className="ion-align-items-baseline " >
<IonCol size-lg="3" size-md="4" size-sm="6" size="12" className='ion-no-padding ' >
{ Data.map( (item) => <PrepareCard key={item.id} info={item} />)}
</IonCol>
</IonRow>
</IonGrid>
With my code above i get one component per row irrespective of the device , but i need multiple components for row depending on the device .
Please let me know if additional details are required .
Thanks for helping !
1 post - 1 participant
Hi There,
I am trying to export the camera result to Vue.
I am using capacitor, I know it should be a pretty easy solution but I am not able to figure this out.
the imageUrl varible is storing the image uri.
Many thanks
export function usePhotoGallery() {
const { Camera } = Plugins;
const takePhoto = async () => {
const cameraPhoto = await Camera.getPhoto({
resultType: CameraResultType.Uri,
source: CameraSource.Camera,
quality: 100,
});
console.log(cameraPhoto.webPath)
var imageUrl = cameraPhoto.webPath
console.log(imageUrl)
};
return {
takePhoto,
};
}
1 post - 1 participant
hey friends
Hope everyone is absolutely fine.
I am facing an issues i have list of data there have some website url few are coming with https or http like that https://ionicframework.com/ and few website link are coming with like this www.ionicframework.com problem is that with https or http url is working fine with inapp browser but www.ionicframework.com its opening http://localhost:8100/ www.ionicframework.com like this. Please anyone can give me a solution for it.
1 post - 1 participant
