I am making a web app with Ionic (at least some will be for web only).
However I can’t seem to get the page to scroll vertically. The basic html example is below. This works fine in a raw Angular project but is always squashed into a single page in Ionic with no scrolling.
<div style="width: 100px; height: 2000px; background-color: red;">test</div>
<div>test2</div>
1 post - 1 participant
<ion-refresher (ionRefresh)=“doRefresh($event)” slot=“fixed”>
<ion-card *ngIf=“dataPage”>
<img *ngIf=“dataPage[’_embedded’] && dataPage[’_embedded’][‘wp:featuredmedia’] && dataPage[’_embedded’][‘wp:featuredmedia’][0] && dataPage[’_embedded’][‘wp:featuredmedia’][0][‘media_details’]&& dataPage[’_embedded’][‘wp:featuredmedia’][0][‘media_details’][‘sizes’][‘full’]” src="{{ page[’_embedded’][‘wp:featuredmedia’][0][‘media_details’][‘sizes’][‘full’].source_url }}" />
<ion-card-header class=“text-wrap” *ngIf=“dataPage.title”>
<ion-card-title [innerHTML]=“dataPage.title.rendered”>
{{ dataPage.date | date:‘fullDate’ }}
<ion-card-content text-wrap *ngIf=“dataPage.content”>
1 post - 1 participant
ng model not working in app.component.html file. What should I do?
Thanks in advance.
<!-- Category Edit Form-->
<ion-card class="ion-padding" *ngIf="EditForm">
<ion-label position="stacked"> <strong>Edit Category</strong></ion-label>
<ion-input type="text" [(ngModel)]="UpdateCategory"> </ion-input>
<div>
<ion-icon class="ion-float-right" name="checkmark-outline" size="large" slot="icon-only" color="primary"></ion-icon>
<ion-icon class="ion-float-left" (click)="closeForm()" name="close-outline" size="large" slot="icon-only" color="danger"></ion-icon>
</div>
<br/>
</ion-card>
Error Message
Can’t bind to ‘ngModel’ since it isn’t a known property of ‘ion-input’.
If ‘ion-input’ is an Angular component and it has ‘ngModel’ input, then verify that it is part of this module.
If ‘ion-input’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.ng
2 posts - 2 participants
I’m new to React and TS so maybe I’m just an idiot but so far I’ve been doing fine building out my app but I need to use the file-transfer plugin and this is where everything breaks down.
constructor(private transfer: FileTransfer, private file: File) { } doesn’t work under the imports and only works if I put it in a class, however then “FileTransfer” is viewed as a value and not a type. However if it’s outside of the class then it gets the error cannot find name constructor.
Then fileTransfer.download() gets me Duplicate identifier ‘fileTransfer’.ts(2300)
I could share with you the code that I have but honestly it’s just a patch-work piece of garbage that has nothing working so instead I’ll show you what I wanted to work
constructor(private transfer: Transfer, private file: File) { }
const fileTransfer: TransferObject = this.transfer.create();
function getLatestTealist() {
const url = 'http://dandtea.com/tealist.json';
fileTransfer.download(url, this.file.dataDirectory + 'current_compressed.json').then((entry) => {
console.log('download complete: ' + entry.toURL());
// MAKE TOAST SAYING "LATEST VERSION GRABBED"
}, (error) => {
// handle error
alert(error);
});
And maybe someone can help me understand how to make that work. I really appreciate it.
1 post - 1 participant
I have local notifications in my chat app but they only fire if user is in same group page as notification is fired!
chat group 1:
chat group 1 at the same time. If user 2 app is closed or he is in another page won’t receive notification app.components.ts
import {
Plugins,
LocalNotificationScheduleResult, //here
NetworkStatus,
PluginListenerHandle,
PushNotification,
PushNotificationToken,
PushNotificationActionPerformed } from '@capacitor/core';
export class AppComponent implements OnInit, OnDestroy {
notifs: LocalNotificationScheduleResult; //here
pendingNotifs: LocalNotificationScheduleResult; //here
constructor(...){...}
async ngOnInit() {
// local notifications
await Plugins.LocalNotifications.requestPermissions();
try {
Plugins.LocalNotifications.addListener('localNotificationReceived', (notification) => {
console.log('Notification: ', notification);
});
Plugins.LocalNotifications.addListener('localNotificationActionPerformed', (notification) => {
console.log('Notification action performed', notification);
});
} catch (e) {
console.log(e);
}
}
myTab.page.ts that pushes notifications
import { Plugins } from '@capacitor/core';
const { Toast } = Plugins;
ngOnInit() {
this.socket.fromEvent('message').subscribe(async (message: any) => {
// notif (should push notifications)
const notifs = await Plugins.LocalNotifications.schedule({
notifications: [
{
title: 'Local Notifications',
body: message.msg.message,
id: Math.floor(Math.random() * 10),
schedule: { at: new Date(Date.now() + 1000 * 2) },
sound: 'beep.aiff',
attachments: null,
actionTypeId: 'OPEN_CHAT',
extra: null
}
]
});
console.log('scheduled notifications', notifs);
});
}
Any idea?
1 post - 1 participant
Has anyone been successful in implementing the fallback URL functionality of the deep linking functionality of branch io.
My deep linking works when the app is installed. But, i want the link to redirect to play store or custom URL when user doesnt have that app installed on their devices.
I have filled up all the required values in the dashboard.
1 post - 1 participant
How do I use the Background Geolocation Plugin in such a way that it returns me the current location of the device every 10 mins even if the app is in the background or closed.
Is there a variable that I have to set in the background-geolocation plugin or something?
Here’s the Background Geolocation Plugin:
Thanks in advance!
1 post - 1 participant
Hey!
Since 2 days I have the problem that I cannot run an ng build (for docker).
I get the following message every time:
An unhandled exception occurred: Job name “…getProjectMetadata” does not exist.
In a Stackoverflow contribution the problem could be fixed, but this is not a state…
I had to do the following:
I dont know why this is only work with the version 0.803.24
I hope anyone have an solution for this.
1 post - 1 participant
Hi,
Following this topic: https://forum.ionicframework.com/t/how-to-dynamically-feed-the-this-validations-form/187947/2 ,
I’m blocked now with this error message: Error: Uncaught (in promise): TypeError: this.l_drink is not iterable
In the .ts:
export class NewOrderPage //implements OnInit
{
…
drinks: Observable<Drink>;
…
constructor(
…
personService: PersonService
) {
this.drinks = personService.getAllDrinks();
When I try with the following block, Visual Studio Code complains on this.drinks about
Type ‘Observable<PersonNames[]>’ must have a ‘Symbol.iterator’ method that returns an iterator.
for (let c of this.drinks) {
ctrls[drk_${c.id}] = new FormControl(false);
ctrls[drk_amt_${c.id}] = new FormControl(’’);
}
Then I tried with
this.drinks.subscribe((value) => {
this.l_drink = [...value];
});
let ctrls = {};
for (let c of this.l_drink) {
ctrls[drk_${c.id}] = new FormControl(false);
ctrls[drk_amt_${c.id}] = new FormControl(’’);
}
this.validations_form = this.formBuilder.group(ctrls);
…
but then it crashes in the console with Error: Uncaught (in promise): TypeError: this.l_drink is not iterable
Can you please advise me how to fix that?..
For info, in the type.ts
…
export default interface Drink {
id: string;
name: string;
};
…
1 post - 1 participant
Scroll assist prevents propagation of events on iOS which does not work well with a custom Gesture that implements long press event (onEnd never gets called so my timer runs out and triggers long press event action).
Even the simplest @HostBinding is not working since scroll assist calls stopPropagation on the event.
Is there some way to get click/touchEnd event on gesture’s directive?
Version: ionic 5.1.1
P.S. If I comment-out the selected lines everything works as expected
1 post - 1 participant
let options = {
date: "2020-5-6",
mode: 'date'
}
console.log("picker started");
this.datePicker.show(options).then(
date => {
it’s not happen in android .
I hard coded 2020-5-6. but same error in new Date()
as screen below. date is not shown and log is not shown after then( date=>{
the problem is that it’s not shown log on error. nothing is shown on log after picker started
1 post - 1 participant
Hi there everyone,
I’m looking for a way to make my ionic app receive the air pressure from devices. I’ve done this before in Xcode but can’t seem to find a ionic-native wrapper for one of the Cordova plugins out there that actually can communicate.
I’m using Vue.js to build the ionic app meaning I work with capacitor, but can’t find any capacitor altimeter/barometer plugins either… Feeling a bit lost here.
Is there a way that I can install the cordova plugin and use it without any wrappers and without Cordova installed?
Thanks in advance!
Chris
1 post - 1 participant
I am using a Select with Popover interface. I want to center the popover box horizontally.
I found this css to center it in both directions:
.popover-wrapper .popover-content{
position: relative !important;
margin: 0 auto !important;
left: auto !important;
top: auto !important;
}
But I want to maintain the vertical position, and I am unable to figure out how to do that.
Can anyone please help me?
1 post - 1 participant
I have a requirement where user can view the pdf or csv/xls file in the Application ( pwa - Web and Android app) and download it. I came across the cordova plugins such as ‘preview-any-file’ and ‘document viewer’ for native android app and ios app. These plugins work with only native apps. I also came across the ‘fileOpener’ plugin but again the same problem only works with native app. I am looking for the api/ library which will work/support for pwa (both Web app as well as Mobile app, mainly android). If anyone knows such apis or libraries please do suggest. Thank you in advance. Any suggestions are appreciated.
1 post - 1 participant
Hi All
I am using Ionic Capacitor with Ionic App flow. I have recently upgrade my project from Cordova to Capacitor.
I have also added Firebase notifications as shown in the tutorial
https://capacitor.ionicframework.com/docs/guides/push-notifications-firebase/
I have managed to get it working with Andriod, but when it comes to IOS
I get an email with the 'Missing Push Notification Entitlement’ Error.
I do not have a apple computer with Xcode, therefore how do i enable the notification settings using Appflow?
Thank You
Regards
DJ
1 post - 1 participant
Hi,
I have been getting mails from Apple saying the UIWebView API is deprecated and must be using WKWebView
When I have created a new workspace and didn’t add any plugins and also removed all the default plugins also.
Then I have just added cordova-plugin-ionic-webview plugin only and also added in the config.xml file.
After that I have created ios platform and the ios is being created with version 5.1.1
And my ionic version is 5.4.16
My cordova version is 9.0.0
Even after that I have been getting the same mail from the Apple.
Can anyone tell me what could be the problem or else what should I do to stop getting the mails from Apple.
Thanks in advance.
1 post - 1 participant
Hi,
this is my first app with Capacitor and I have to build this app for Android.
With Cordova I build an app with these commands:
1) ionic cordova build --prod --release android
2) cd ....myapp\platforms\android\app\build\outputs\apk\release\
3) jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore myapp.keystore app-release-unsigned.apk myapp
4) zipalign -v 4 app-release-unsigned.apk MyApp-010001.apk
Now I read that with Capacitor I have to run these commands:
- ionic build
- npx cap add android
- npx cap copy android
- npx cap open android
The last command opens Android Studio. OK
And then?
How can I:
I haven’t find a tutorial on this and I think it is strange that the Ionic site says only:
“Once Android Studio launches, you can build your app through the standard Android Studio workflow.”
Any help will be appreciated
Thank you very much
cld
2 posts - 2 participants
How to perform CRUD operations using capacitors HTTP or Angulars HttpClient without running into CORS errors. I am not getting CORS error while doing API calls from POSTMAN.
1 post - 1 participant
im working on ionic v4 and i need to hide tabs in some pages . how to achieve this ? thanks in advance
1 post - 1 participant
Hi, I have an Ionic 5 React app with tab navigation. I want to implement transition animations when the user navigates to a new tab. How can I implement this? Upon googling this, everyone just says “tabs are broken in Ionic” and no really helpful answer.
For example in the Tab API example:
When you click a new tab there is a sudden change to the new tab. I’m looking for a slide-in transition for the tabs instead.
Thanks.
1 post - 1 participant