I’m trying to set the ripple color for the back button using the ionic’s custom CSS property (--ripple-color). However, I don’t see that working. Here’s my piece of code
header.html
<!-- Default back button -->
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/" text=""></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
header.scss
ion-back-button {
--ripple-color: red;
}
As far as i know this is because of the Ionic Scroll Assist 
This needs the height of the screen after the keyboard is shown
Ahhh good to see that there @ldebeasi! Isn’t ion-page on pretty much every screen or 95% of them? Shouldn’t that be globally registered? What would be really rad is if someone wrote a VS code plugin that would automatically import a tag and list on imports and components and remove from same list when you comment out a tag or remove. I feel it would help ionic/vue adoption. Anyway, thanks again for the help!
Thanks for your reply. If that is not possible how apps like whatsapp able to recieve call even it is in the closed state. Please explain on this so that i can follow in my app also.
The Camera doesn’t really need any permission if you just want to take a picture, the permission is needed if you want to pick an existing photo from the gallery.
Please help me I am getting error.
[ng] Error: node_modules/@ionic/storage/es2015/storage.d.ts:2:10 - error TS2305: Module ‘"@angular/core"’ has no exported member ‘OpaqueToken’.
[ng] 2 import { OpaqueToken } from ‘@angular/core’;
[ng]
npm list :-
±- ngcc_entry_points.json@ extraneous
±- @angular-devkit/build-angular@12.1.4
±- @angular-eslint/builder@12.0.0
±- @angular-eslint/eslint-plugin-template@12.0.0
±- @angular-eslint/eslint-plugin@12.0.0
±- @angular-eslint/template-parser@12.0.0
±- @angular/cli@12.1.4
±- @angular/common@12.1.5
±- @angular/compiler-cli@12.1.5
±- @angular/compiler@12.1.5
±- @angular/core@12.1.5
±- @angular/forms@12.1.5
±- @angular/language-service@12.0.5
±- @angular/platform-browser-dynamic@12.1.5
±- @angular/platform-browser@12.1.5
±- @angular/router@12.1.5
±- @ionic-native/app-version@5.35.0
±- @ionic-native/base64@5.35.0
±- @ionic-native/call-number@5.35.0
±- @ionic-native/camera@5.35.0
±- @ionic-native/fcm@5.35.0
±- @ionic-native/file-chooser@5.35.0
±- @ionic-native/file-path@5.35.0
±- @ionic-native/file-transfer@5.35.0
±- @ionic-native/file@5.35.0
±- @ionic-native/firebase-authentication@5.35.0
±- @ionic-native/in-app-browser@5.35.0
±- @ionic-native/market@5.35.0
±- @ionic-native/photo-viewer@5.35.0
±- @ionic-native/social-sharing@5.35.0
±- @ionic-native/splash-screen@5.35.0
±- @ionic-native/status-bar@5.35.0
±- @ionic-native/streaming-media@5.35.0
±- @ionic-native/web-intent@5.35.0
±- @ionic/angular-toolkit@4.0.0
±- @ionic/angular@5.6.13
±- @ionic/storage-angular@3.0.6
±- @ionic/storage@2.0.0
±- @ngx-translate/core@13.0.0
±- @ngx-translate/http-loader@6.0.0
±- @types/jasmine@3.6.11
±- @types/jasminewd2@2.0.10
±- @types/node@12.20.19
±- @typescript-eslint/eslint-plugin@4.16.1
±- @typescript-eslint/parser@4.16.1
±- call-number@1.0.1
±- com-badrit-base64@0.2.0
±- com-darryncampbell-cordova-plugin-intent@2.0.0
±- com-sarriaroman-photoviewer@1.2.5
±- cordova-android@9.1.0
±- cordova-plugin-androidx-adapter@1.1.3
±- cordova-plugin-androidx@3.0.0
±- cordova-plugin-app-version@0.1.12
±- cordova-plugin-cache-clear@1.3.8
±- cordova-plugin-camera@5.0.3
±- cordova-plugin-device@2.0.2
±- cordova-plugin-fcm-with-dependecy-updated@7.8.0
±- cordova-plugin-file-transfer@1.7.1
±- cordova-plugin-file@6.0.2
±- cordova-plugin-filechooser@1.2.0
±- cordova-plugin-filepath@1.6.0
±- cordova-plugin-firebase-authentication@5.0.0
±- cordova-plugin-inappbrowser@5.0.0
±- cordova-plugin-ionic-keyboard@2.2.0
±- cordova-plugin-ionic-webview@4.2.1
±- cordova-plugin-market@1.2.0
±- cordova-plugin-splashscreen@5.0.2
±- cordova-plugin-statusbar@2.4.2
±- cordova-plugin-streaming-media@2.3.0
±- cordova-plugin-whitelist@1.3.3
±- cordova-plugin-x-socialsharing@6.0.3
±- cordova-sqlite-storage@6.0.0
±- cordova-support-android-plugin@1.0.2
±- es6-promise-plugin@4.2.2
±- eslint-plugin-import@2.22.1
±- eslint-plugin-jsdoc@30.7.6
±- eslint-plugin-prefer-arrow@1.2.2
±- eslint@7.32.0
±- firebase@8.9.0
±- jasmine-core@3.8.0
±- jasmine-spec-reporter@5.0.2
±- karma-chrome-launcher@3.1.0
±- karma-coverage-istanbul-reporter@3.0.3
±- karma-coverage@2.0.3
±- karma-jasmine-html-reporter@1.7.0
±- karma-jasmine@4.0.1
±- karma@6.3.4
±- localforage-cordovasqlitedriver@1.8.0
±- ngx-ionic-image-viewer@0.7.4
±- ngx-navigation-with-data@2.0.0
±- protractor@7.0.0
±- rxjs@6.6.7
±- ts-node@8.3.0
±- tslib@2.3.0
±- typescript@4.2.4
`-- zone.js@0.11.4
Ionic Info -:
Ionic:
Ionic CLI : 6.16.3 (C:\Users\User\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.6.13
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 12.2.0
@angular/cli : 12.1.4
@ionic/angular-toolkit : 4.0.0
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 9.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 23 other plugins)
Utility:
cordova-res : 0.15.3
native-run : 1.1.0
System:
Android SDK Tools : 26.1.1 (C:\Users\User\AppData\Local\Android\Sdk)
NodeJS : v14.15.0 (C:\Program Files\nodejs\node.exe)
npm : 7.20.3
OS : Windows 10
Are you using Vetur in VSCode? Vetur has this functionality built in for Vue apps.
I globally register ion-page and ion-content because as you said, they are used on 95% of pages.
I use Vetur, but it does some wonky things sometimes with the components section.
The new <script setup> syntax coming in I think v3.2 simplifies this removing the requirement of components. See here and here.
This is my Github ion-infinite-scroll vue project with using Axios to bind API then set the limit data output.
This is a project example without using typescript.
https://github.com/whitersun/ion-inifinite-scroll-example-with-api
I hope this ion-infinite-scroll in vue version can help you guys out the problem day. Ciao ~
How does this work? I have Vetur installed and it’s not doing anything for me automatically on either of my computers. Is there a setting I need to turn on or something I need to configure on my project? That would be a huge help!
Hi @F1R3ON, I don’t get u point. Can you make the question details, please?
You can connect your cellphone via usb and run the adb shell command on your terminal to access your phone’s shell. There you can access your app’s external storage using the command cd sdcard/Android/data/[package-name]. You can also use run-as [package-name] to access your app’s internal storage.
I find it fascinating how much language influences (and reveals) the assumptions we make about the world. For example, the exact same set of circumstances could be described instead as:
The documentation and examples that are listed as current on the Ionic website don’t match what I am seeing in my environment. I have also observed many different and incompatible suggestions on various online forums, perhaps suggesting that the proper syntax for this feature may have changed over time.
If you look at it that way, you might start to wonder if you’ve somehow got outdated or mismatched versions of software, some of which is no longer compatible with the currently documented state of affairs. To test that theory, perhaps you could be so kind as to post package.json.
I’m trying to integrate my Ionic/Capacitor app with Microsoft Authentication Library (Msal), and unfortunatly i couldn’t found any Capacitor plugin for that, only found this Cordova plugin with its Ionic wrapper.
So I’ve followed the instructions of how to use cordova plugins with capacitor according with the instructions of the plugin itself, but unforunatly with no success.
The problem is in the cordova plugin not being executed:
cordova.exec(successCallback, errorCallback, 'MsalPlugin', 'msalInit', [JSON.stringify(options)]);
I added the cordova.js and cordova_plugin.js in index.html , but still calling another place rather than the real exec function (I’ve tried in cordova project to see what it’s calling).
Was i missing something in the integration between cordova and capacitor, or it’s something in plugin itself preventing it from being working with capacitor.
Hi kanjiroushi,
did you solve your problem?
//Edit
If not, then below link was helpful for me:
Thank you! This worked for me.
For those using react, use document.addEventListener("deviceready", () => { instead of this.platform.ready()
I am trying to use this example to later implement Tabs in my project but the output is
Error: IonTabs must contain an IonRouterOutlet
Is it possible to avoid routes and use the onclick method? Because what I want to do is open a ionModal
<IonTabs>
<IonTabBar slot="bottom">
<IonTabButton tab="schedule">
<IonIcon icon={calendar} />
<IonLabel>Schedule</IonLabel>
<IonBadge>6</IonBadge>
</IonTabButton>
<IonTabButton tab="speakers">
<IonIcon icon={personCircle} />
<IonLabel>Speakers</IonLabel>
</IonTabButton>
<IonTabButton tab="map">
<IonIcon icon={map} />
<IonLabel>Map</IonLabel>
</IonTabButton>
<IonTabButton tab="about">
<IonIcon icon={informationCircle} />
<IonLabel>About</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
Check out my routes:
const routes: Array<RouteRecordRaw> = [
{
path: "/",
component: Tabs,
children: [
{
path: "",
redirect: "/surveys",
},
{
path: "surveys",
component: Surveys,
},
{
path: "settings",
component: Settings,
},
{
name: "survey",
path: "/surveys/:surveyid",
component: SurveyRouterOutlet,
props: true,
children: [
{
path: "",
component: Survey,
props: true,
},
{
path: "components/:componentid",
component: Component,
props: true,
},
{
path: "components/new/:type",
component: Component,
props: true,
},
{
name: "preview",
path: "preview/:previewid",
component: Preview,
props: true,
},
],
},
],
},
];
As you can see when I go from /surveys to /surveys/4 for example, there is no animation. If I go from /surveys/4/components/8 I get animation. I believe because I have to use SurveyRouterOutlet it doesn’t quite work the same as going directly to the component. How can this be fixed or how can I have those same routes in a different way?
Didn’t expect anything else from a moderator of the Ionic forum. No, my software is in fact not outdated and everything is up to date.
Other than that, the Ionic documentation is probably one of the worst ones to work with as a Dev, there is way less information given than needed. I don’t remember how often I had to look at different sources just to find a solution to a simple problem that should, in fact, be documented in the official Docs.
This screenOrientation thing was not even the first problem, that should have been a real quick and easy fix, that I spent hours on just to find a StackOverflow Post that guided me to that exact “simple” solution.
Thanks.
This is for sure an useful tips to use.
But my target is to save a file in a folder where the user can use it with a simple file browser on the phone.
As said before, a lot of application creates its own folder in android/0/emulated folder.
Until now i cannot find a way to do this with capacitor