In my solution I add a dependency in the child components on ViewController. this can be @Optional if you will ever use the component outside of ionic pages. As a child of an ionic page, it gets the ViewController of the hosted page. You can then subscribe to the page lifecycle events of that view controller for leaving the page and other non-destructive events.
Ionic 4 ngOnDestroy not called from component on page navigation
In Ios when choose photo or any file not asking me for permssion
Hello,
We used file-chooser plugin to choose photos or files on ios but the device not asking me permission to access storage and user will directly choose file without accepting permission.
we add this key permisson on Config.xml and info.plist
- NSPhotoLibraryUsageDescription
- NSPhotoLibraryAddUsageDescription
- NSDesktopFolderUsageDescription
- NSDocumentsFolderUsageDescription
- NSDownloadsFolderUsageDescription
- NSFileProviderDomainUsageDescription
Dark Mode Splash Screen
You guys should maybe read the Question correct. The Splash Screen is nothing you can change with functions, because it is displayed before you’re app even runs. I make it work, but you have to change the X-Code Project directly. First thing is that you need a LaunchScreen Splash Screen, not UiImage SplashScreen. It is possible already, and also required sometimes, but seems like Apache is working on this: https://github.com/apache/cordova-ios/issues/770 so delete the UIImages. Than you need to set theBackground of the Storyboard to SystemBackgroundColor (See here). I think it is not possible automatically at the time… Give it a Try
Open popup when click on marker
First, try to log something to the console when you click the marker to check if the Function gets called. Second inspect your App using Google Chrome Dev Tools or Safari Webinspector, search for your “popup”, check if the class “overlay” is set. If yes, look up why it isn’t shown. If no, reply here again please.
Events not worked in ionic 6.1.0
These are good points. I think the important thing to remember is that the events system that people (and I) have used up until now was extremely simple to understand and therefore use and maintain.
People don’t want to use a more (seemingly) complex way of achieving something if another does exactly the job it’s supposed to do.
I read your linked post on why events are not recommended, my rebuttal for the 2 points:
- Typos: I have a list of events in an object so I can use them throughout e.g. myEvents.login_success: aka no typos ever.
- Type safety: all my events are object checked at the receiving end and work fine. The code is pretty straightforward.
Just how I see it.
Shadow DOM is a classic example of this in IMHO - it brings all this lovely encapsulation benefit for web components - but then becomes a royal pain in the butthole for customising them, which is exactly what is so good and EASY about plain CSS.
Cannot find module after installing ionic
Thanks for the answer, unfortunately I’ve tried both of those. In fact I’ve uninstalled and reinstalled nodejs a number of times. With different versions even. Completely removed ionic and angular a few times also. I think
my nose paths are messed up but besides the environmental variables I have no idea where those are getting set. Thanks again. I’m so close to just wiping my computer and starting from scratch.
[Solution] Fix iOS 10 Privacy Permissions
i add same code on my config.xml and my info.plist file but device not asking me permission for accessing photos or files from storage.
here is my info.plist file keys that i used
<key>NSBluetoothAlwaysUsageDescription</key>
<string>This app requires constant Bluetooth access to function properly.</string>
<key>NSBluetoothPeripheralUsageDescription</key>
<string>This app requires Bluetooth access to function properly.</string>
<key>NSCalendarsUsageDescription</key>
<string>This app requires calendar access to function properly.</string>
<key>NSCameraUsageDescription</key>
<string>This app requires camera access to function properly.</string>
<key>NSContactsUsageDescription</key>
<string>This app requires contacts access to function properly.</string>
<key>NSDesktopFolderUsageDescription</key>
<string>This app needs access to folder to allow you to take and upload a picture.</string>
<key>NSDocumentsFolderUsageDescription</key>
<string>This app needs access to folder to allow you to take and upload a picture.</string>
<key>NSDownloadsFolderUsageDescription</key>
<string>This app needs access to folder to allow you to take and upload a picture.</string>
<key>NSFileProviderDomainUsageDescription</key>
<string>This app needs access to folder to allow you to take and upload a picture.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>This app requires constant access to your location in order to track your position, even when the screen is off or the app is in the background.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>This app requires constant access to your location in order to track your position, even when the screen is off or the app is in the background.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>This app requires access to your location when the screen is on and the app is displayed.</string>
<key>NSMainNibFile</key>
<string></string>
<key>NSMainNibFile~ipad</key>
<string></string>
<key>NSMicrophoneUsageDescription</key>
<string>This app requires microphone access to function properly.</string>
<key>NSMotionUsageDescription</key>
<string>This app requires motion detection access to function properly.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>App require permission for access photos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>To choose photos</string>
<key>NSRemindersUsageDescription</key>
<string>This app requires reminders access to function properly.</string>
and i also add it to config.xml file
<config-file parent="NSPhotoLibraryUsageDescription" platform="ios" target="*-Info.plist">
<string>This app requires photo library access to function properly.</string>
</config-file>
<config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
<string>This app needs access to your Camera to allow you to take and upload a picture.</string>
</config-file>
<config-file parent="NSPhotoLibraryAddUsageDescription" platform="ios" target="*-Info.plist">
<string>This app needs access to your Camera to allow you to take and upload a picture.</string>
</config-file>
<config-file parent="NSDesktopFolderUsageDescription" platform="ios" target="*-Info.plist">
<string>This app needs access to folder to allow you to take and upload a picture.</string>
</config-file>
<config-file parent="NSDocumentsFolderUsageDescription" platform="ios" target="*-Info.plist">
<string>This app needs access to folder to allow you to take and upload a picture.</string>
</config-file>
<config-file parent="NSDownloadsFolderUsageDescription" platform="ios" target="*-Info.plist">
<string>This app needs access to folder to allow you to take and upload a picture.</string>
</config-file>
<config-file parent="NSFileProviderDomainUsageDescription" platform="ios" target="*-Info.plist">
<string>This app needs access to folder to allow you to take and upload a picture.</string>
</config-file>
Transfer Plugin Photo Upload
have you got solution. I also stucked here.Please tell me if you get any solution.
Clickable ion-item with clickable ion-icon inside
Hi all,
I did not manage to find a proper answer to this issue.
Actually it is working, but clicking on the icon also clicks the item itself.
I would like to create a list of clickable items and at the “end” slot to have an icon which toggles a different function.
Currently I solved it my making the clickable instead of the item itself.
But it would be way better to isolate each of the clicks, when the item itself is clickable.
Thank you!
Ion-segment color change (Ionic 5)
Thank you for you answer.
I tried following within .scss of the page component:
ion-content {
--ion-background-color: #afca0a;
}
But the outcome was the same as above. Everything is in green :-/
Or do you mean I have to set the background individually for each component?
But this would be a little strange.
I really try to understand it, but for me it looks not easy customizable in simple way.
Because I really play only with those custom variables and nothing else
Clickable ion-item with clickable ion-icon inside
If you have one clickable item within another clickable item, you’ll need to stop the propagation of the click from that item to it’s parent:
Say you have this:
<div (click)="one()">
<p>Some text...</p>
<div (click)="two()">
</div>
You would change this line:
<div (click)="two()">
to this:
<div (click)="two($event)">
And then in your event handler within your component:
two(event) {
event.stopPropagation();
}
This will cause the click handler for the parent (i.e. one()
) from firing.
Deploy.checkForUpdate - Throws Exception on ios
Hi,
have you solved this issue? I’ve the same in this moment…
Stop pushing the page to top of the screen when opens the keyboard
This is how it works. When the keyboard opens, the WebView underneath adjusts to fit the new size. If it did not do that, then the WebView would be obscured by the keyboard.
For Android, you can configure this by setting an option in the Android build configuration. See this Stack overflow answer for more details.
Gestures with Angular bindings
I’ve run into this this week as well. In my case, I’ve got a style binding in a component that isn’t updating in response to changes to an input property during a gesture, and I had landed in the same place that the StackOverflow post did - manually firing detectChanges updates the css and gives me back the functionality I’d expected. I’d originally implemented it in Ionic 4 with HammerJS, which didn’t require a manual detectChanges.
The possibility we’re both doing something wrong is there, but it does seem a bit suspect.
Clickable ion-item with clickable ion-icon inside
Thank you very much, @nvahalik !
For some reason it still fires in my code:
<ion-list>
<ng-container *ngFor="let item of channels">
<ion-item [routerLink]="['/', 'schedule', item.id, 'date']">
<ion-avatar slot="start">
<img src="{{item.logo}}">
</ion-avatar>
<ion-label>{{ item.title }}</ion-label>
<ion-buttons slot="end">
<ion-button (click)="favoriteChannel($event, item.id)">
<ion-icon slot="icon-only" name="star-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-item>
</ng-container>
</ion-list>
favoriteChannel(event: Event, variable1: any) {
event.stopPropagation();
this.favoriteService.favoriteChannel(variable1).then(() => {
this.isFavorite = true;
});
}
Can you see anything wrong in my code?
Clickable ion-item with clickable ion-icon inside
Actually, you mind need to do one or more of the following:
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
Clickable ion-item with clickable ion-icon inside
You are right!! I added event.preventDefault(); and it worked!!
Thanks a lot @nvahalik , you rock!
And Ionic is awesome! I wish you and the Ionic team all the best!
Ionic + React: align items in grid
I have an IonRow with two IonCol elements. Both contain a button. I would like one of these buttons to be placed at the beginning of its column, and the other at the end.
This seems complicated. As a temporary solution, I would also be happy with buttons being centered in their respective cols. I found this in the docs: https://ionicframework.com/docs/layout/grid#alignment
So my code now looks like this:
<IonRow className="ion-align-items-center ion-justify-content-center">
<IonCol className="ion-align-items-center ion-justify-content-center">
<IonButton ...
</IonCol>
<IonCol className="ion-align-items-center ion-justify-content-center">
<IonButton ...
</IonCol>
</IonRow>
But the classes have no effect on the UI.
How can I align the buttons properly?
Extended Device Information
Hi, I get the following error trying to access any of the function of the plugin:
Native: tried calling ExtendedDeviceInformation.memory, but the ExtendedDeviceInformation plugin is not installed.
Stop pushing the page to top of the screen when opens the keyboard
Thank you for your reply. I tried to add that activity inside the AndroidManifest.xml as suggested in that stack-overflow answer. But still the same. Keyboard push the page to the top of the screen. I want to avoid it.