To change ion-thumbnail size
scss is like this
ion-thumbnail
{
width:100px;
height:100px;
img
{
width:auto !important;
height:auto !important;
}
}
Style slot size
Ionic 4 set style color by a variable
Hello @DargEdge
I think you need to create a variable sColor in your page.
Then use this variable in your file like that:
<ion-item-sliding ngStyle="{'border-color': sColor}">
Ionic push plugin
Hello,
I just want to highlight the fact that the two main plugins for Push Notifications management (Push and FCM) seem to be not maintained actively.
This is a big problem for us, because this generates problems caused by the old versions of Google Services plugin that they use.
Can you please do something?
Toggle blank list
Hello
Why when I use toggle I get blank item
<ion-list >
<ion-item-sliding *ngFor="let expense of expenses; let i=index">
<ion-item nopadding >
<p item-start>
{{i+1}}
</p>
<div>
<div>
<!--{{expense.rowid}}<br>-->
{{expense.description}} <br>
<div *ngIf="expense.paid == 'YES'">
<label >Paid: </label>
<ion-icon style="color:green" name="checkmark-circle-outline"></ion-icon><br>
</div>
Starting: {{expense.date | date: 'dd/MM/yyyy HH:mm'}}<br>
Type: {{expense.type}}<br>
Recurring: {{expense.recurring}}<br>
<label *ngIf="expense.recurring =='Monthly'; else weekly">Every {{expense.date | date: 'dd'}} of Month at {{expense.date | date: 'HH:mm'}} </label>
<label >Added: {{expense.added_date | date: 'dd/MM/yyyy HH:mm'}}</label> <br>
<div *ngIf="expense.today_pay == 'YES' && !expense.paid">
<label >Today Payment: </label>
<ion-icon style="color:green" name="checkmark-circle-outline"></ion-icon><br>
<ion-icon name="information-circle"></ion-icon>
<label>Swipe left to marked it as paid</label>
<ion-label>Test</ion-label>
<ion-toggle [(ngModel)]="test"></ion-toggle>
</div>
Build Break with aapt error message . why?
Could somebody post their working platforms/android/project.properties file, please?
I’m suffering from the same problem and can’t solve it. This is caused by the firebase plugin.
Here’s my project.properties:
target=android-28
android.library.reference.1=CordovaLib
android.library.reference.2=app
cordova.gradle.include.1=cordova-plugin-badge/wakacje-badge.gradle
cordova.system.library.1=com.facebook.android:facebook-android-sdk:4.38.1
cordova.gradle.include.2=cordova-support-google-services/wakacje-build.gradle
cordova.system.library.2=com.google.firebase:firebase-core:16.0.+
cordova.system.library.3=com.google.firebase:firebase-dynamic-links:16.1.+
cordova.system.library.4=com.google.android.gms:play-services-auth:11.8.0
cordova.system.library.5=com.google.android.gms:play-services-identity:11.8.0
cordova.system.library.6=com.android.support:support-annotations:27.+
cordova.system.library.7=com.android.support:support-v4:26.+
cordova.gradle.include.3=cordova-plugin-local-notification/wakacje-localnotification.gradle
cordova.system.library.8=com.android.support:support-v4:24.1.1+
cordova.gradle.include.4=cordova-plugin-firebase/wakacje-build.gradle
cordova.system.library.9=com.google.android.gms:play-services-tagmanager:+
cordova.system.library.10=com.google.firebase:firebase-core:18.0.+
cordova.system.library.11=com.google.firebase:firebase-messaging:18.0.+
cordova.system.library.12=com.google.firebase:firebase-config:18.0.+
cordova.system.library.13=com.google.firebase:firebase-perf:18.0.+
I changed all the ‘firebase:firebase-*’ from ‘+’ to ‘18.0.+’, but now I’m having this problem:
* What went wrong:
In project 'app' a resolved Google Play services library dependency depends on another at an exact version (e.g. "[18.0.
0]", but isn't being resolved to that version. Behavior exhibited by the library will be unknown.
Dependency failing: com.google.firebase:firebase-messaging:18.0.0 -> com.google.firebase:firebase-iid@[18.0.0], but firebase-iid version was 19.0.0.
The following dependencies are project dependencies that are direct or have transitive dependencies that lead to the art
ifact with the issue.
-- Project 'app' depends onto com.google.firebase:firebase-config@18.0.+
-- Project 'app' depends onto com.google.firebase:firebase-messaging@18.0.+
-- Project 'app' depends onto com.google.firebase:firebase-perf@18.0.+
-- Project 'app' depends onto com.google.firebase:firebase-core@16.0.+
-- Project 'app' depends onto com.google.firebase:firebase-core@18.0.+
-- Project 'app' depends onto com.google.android.gms:play-services-tagmanager@+
I guess I should force ‘firebase-iid’ version to 18.0.+ as well, but I have no idea how to do it, as I don’t see this library in project.properties. Now I’m stuck and can’t build my app - any help will be greatly appreciated.
Storage plugin is not removing as should
I have a chat app. I decide to delete the conversation, I have this implementation:
public async deleteConversation(user: Contact): Promise<void> {
this.conversationStorage.remove(user.id).then((status: any): void => {
console.log('status after delete', status); //<--undefined
});
const status = await this.conversationStorage.get(user.id);
console.log('this should be null', status); //<--null
}
but if I find that person again and open up a chat with them then the previous messages are loaded. If I decide to close the chat message then open it up, then and only then is the messages deleted. Essentially I have delete, close the chat window, open up the chat window again (with that person) then it is finally deleted.
Multiple Google Maps Marker with data from firebase
did someone answer this ? i have the same problem
Ionic push plugin
I have the same problem with plugin fcm. This troubles me since 17.june
Ionic serve error: angular.json could not be found
Hi there
ionic serve was working, then got the following errror:
$ ionic serve
> ng.cmd run app:serve --host=localhost --port=8100
[ng] Local workspace file ('angular.json') could not be found.
[ng] Error: Local workspace file ('angular.json') could not be found.
The previous command i ran (failed) - may have something to do with it?
ionic cordova build android
Please can you advise on the next steps to take in order to restore my project so that I can at least run an ionic serve again.
Thanks.
Select count sqllite ionic
db.executeSql(‘SELECT COUNT(mobilephonid) AS result FROM login’,{})
Your error is in the above line.
db.executeSql(‘SELECT COUNT(mobilephonid) AS result FROM login’,) use this line
How to use rating star in ionic 4?
To reduce the size check
<div class="rate_div">
<rating [rate]="review.rating" readonly="true">
</rating>
</div>
Then in global.scss
.rate_div {
rating {
[ion-button][disabled] {
opacity: 1;
}
ion-buttons {
display: flex;
justify-content: left !important;
font-size: 20px !important;
}
ion-icon {
color: gray;
font-size: 20px !important;
&.filled {
color: #ffb400;
font-size: 20px !important;
}
}
}
}
Firebase App unable to Compile on Android with AAPT error
Many thanks. This works!
How to use Youtube player API with ionic 4 and capacitor for Android and iOS app
Hi,
The documentation is not proving to be enough to implement Capacitor Youtube API in my app using Ionic 4.
Can we have a demo app or some more detail on how to play video in the app using this api
Build Break with aapt error message . why?
this is my project.properties
target=android-26
android.library.reference.1=CordovaLib
android.library.reference.2=app
cordova.gradle.include.1=com-sarriaroman-photoviewer/tineri-photoviewer.gradle
cordova.gradle.include.2=cordova-plugin-badge/tineri-badge.gradle
cordova.system.library.1=com.android.support:support-v4:24.1.1+
cordova.gradle.include.3=cordova-plugin-code-push/tineri-build-extras.gradle
cordova.system.library.2=com.android.support:support-v4:27.+
cordova.gradle.include.4=cordova-plugin-firebase/tineri-build.gradle
cordova.system.library.3=com.google.android.gms:play-services-tagmanager:16.0.8
cordova.system.library.4=com.google.firebase:firebase-core:16.0.8
cordova.system.library.5=com.google.firebase:firebase-messaging:17.5.0
cordova.system.library.6=com.google.firebase:firebase-config:16.4.1
cordova.system.library.7=com.google.firebase:firebase-perf:16.2.4
cordova.system.library.8=com.google.android.gms:play-services-analytics:16.0.8
cordova.system.library.9=com.android.support:support-v4:26.+
cordova.gradle.include.5=cordova-plugin-local-notification/tineri-localnotification.gradle
cordova.system.library.10=com.stripe:stripe-android:4.1.2
cordova.system.library.11=com.android.support:support-v4:24.1.1+
cordova.system.library.12=com.android.support:support-v4:26.+
cordova.system.library.13=com.android.support:appcompat-v7:26.+
cordova.gradle.include.6=cordova-android-support-gradle-release/tineri-cordova-android-support-gradle-release.gradle
Using Ionic/Vue with Cordova/Capacitor and Appflow?
Does anyone have experience with publishing an Ionic/Vue app using Cordova/Capacitor through Ionic Appflow?
I know Ionic/Vue is still in beta, but there are running examples of at least some combinations: e.g. Ionic/Vue + Cordova or Capacitor is possible. But not Ionic/Vue + Appflow and also not Capacitor + Appflow.
I wonder, if anyone has tried this stack and has maybe some hack until Ionic/Vue is reaching a final state. And is there any news about the road map? When will Ionic/Vue be possible with Appflow?
Ionic 4 child route component pushed off screen by .ion-page class of parent
My app (Ionic 4, Angular) is split into lazy loaded features. A number of features have common data shared by each page, for example all pages in the ‘vehicle’ feature need the current selected vehicle, which is retrieved by the ‘id’ in the url.
I have a parent route for the feature that gets the common data and child routes below that actually drive the pages -
Feature Module Route Config sample:
const routes: Routes = [
{
path: ':id',
component: VehiclePage,
children: [
{
path: 'set-info',
component: SetInfoPage
},
{
path: 'success',
component: SuccessPage
},
{
path: '',
component: DashboardPage
}
]
}
VehiclePage sample:
@Component({
selector: 'app-vehicles',
template: '<router-outlet></router-outlet>'
})
export class VehiclePage implements OnInit {
constructor(
private route: ActivatedRoute,
private store: Store<fromRoot.AppState>
) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.store.dispatch(new vehicleActions.Get(params['id']))
})
}
}
Aaaaaaanyway. The setup is working fine, the child page loads, data is available, everyone’s happy, except…
The parent page, in this case ‘VehiclePage’ has the ion-page class applied, which pushes the child page content off screen. When I remove the ion-page class it looks ok but I’m wary about removing that class from across the app.
With ion-page class, content is pushed off screen:
Without ion-page class it’s fine:
I haven’t seen any examples of this routing config for Ionic though it’s common in Angular.
If there’s any advice on -
- Anything I’m doing wrong
- The impact of removing the ion-page class (and how to do it cleanly)
- Working examples of a similar solution
- Anything else that might help
it’s greatly appreciated!
Cheers,
Andrew
Android App rejected
Android App Rejected due to sms permission.how we can allow from google to allow permission.is there any replacement of work.I am using @ionic-native/sms package .
Ionic 4 - Nested Tabs Relative Routes
Hi
It appears you’re not using the click event to stop propagation and setting the navigation path in code
<ion-tab-button (click)="clickTab($event, 'web')" [routerLink]="['web']" tab="web" layout="icon-start">
<ion-icon name="globe"></ion-icon>
<ion-label>Web</ion-label>
</ion-tab-button>
clickTab(event: Event, tab: string) {
event.stopImmediatePropagation();
this.router.navigate([`${this.tabPath}${tab}`]);
}
Ionic HTTPS
Hi.
I`m using a javascript package that needs HTTPS to comunicate with the server and there’s no way to use HTTP with this package. so my questions are. ¿is it posible to use HTTPS on Android/IOs apps? and ¿How can I change my oringin from http://localhost to https://localhost on Android and IOs?
Slides - how to disable swipe between slides (with gestures)?
That did the trick for me
@ViewChild(IonSlides) slides: IonSlides;
ngOnInit() {
this.slides.lockSwipes(true)
}
next(){
this.slides.lockSwipes(false)
this.slides.slideNext()
this.slides.lockSwipes(true)
}
previous(){
this.slides.lockSwipes(false)
this.slides.slidePrev()
this.slides.lockSwipes(true)
}