ionic-framework | powerful cross-platform UI toolkit | iOS library

I'm new to ionic-framework. My task is next, I want, When the component is opened, the radio button should be checked default. I want one to be checked.Thanks in advance

enter image description here

Screen image

file typescript

tools.component.html

One of my iframe is not working/loading in IOS only (mobile and emulator) while it is working fine android/chrome/safari. It happens to only one iFrame, while a second is working (in IOS).

I have the following message error: webPageProxy::didFailProvisionalLoadForFrame: frameId = 26, domain = nsurlErrorDomain, code: -999.

I have implemented both answer from stackoverflow: Ionic iframe loading not fully working on iOS iframe is not working in iOS (ionic framework)

Plus i have sanitize the url of the iFrame. Nothing seems to work, the iFrame is white.

The url I am passing (in case it is working:) https://preprod-tpeweb.paybox.com/cgi The url I am passing (in case it is not working https://secure-test.dalenys.com/front/form/process

These two urls are from action POST form, with an iFrame as a target.

Do you have any idea what to do ? Would it be possible that the host has badly set its website ?

Would it be possible that it comes from the fact that the iFrame has this error: Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute ?

update: We had the following error: “Refused to load https://secure-magenta1.dalenys.com/front/form/process because it does not appear in the frame-ancestors directive of the Content Security Policy.”

I'm struggling with Ionic's lifecycle events used with RouterLink.

I have my app data in a JSON file that renders each item using the url paramenters when the page is loaded. I need buttons to go to the next or previous item and refresh the page content, ie:

• I'm on Item 1 (/lecture/item1) => click next => routerLink(/lecture/item2)
• I'm on Item 1 (/lecture/item1) => click prev => routerLink(/lecture/item0) That means that each time i move to a page i need to get the params from the url (/lecture/:param) and update the page data. The problem i'm facing is that RouterLink isn't triggering any Page Leaving lifecycle, so my states doesn't change, also, i can't clean the states (i can do it through an href param, but the whole app is refreshed). I found similar threads on this, but some of them are outdated/still opened: Routerlink bug github.

Is there any way/workaround to reload the component and update the states passing different parameters?

I already tried using useHistory hook, history.replace (Source), and routerDirection="back" but none of them are triggering ion page leaving hooks. I also tried replacing IonRouterOutlet with Switch but this means not having some important ionic features.

Thank you in advance!!

Here is an extract of code for reference:

lectures.json (Array of objects)

In my app, I would like to have a different picker, with two or three columns, so I made 2 different functions to simplify the code. Now I'd like to return my object with my result when the Validate button is pressed. I think I need to deal with Promise, but I am not so familiar with it and I think I am doing something wrong.

Here is my function inside my service :

When navigating through a page stack i've discovered that when i visit the same page twice the does not behave as expected. Here is a graphic of the issue.

It seems that Ionic does not navigate back from the last data of Page 1 but rather of the first occurrence (red arrow). I've found a similar Github issue 16516 which should be fixed but it doesn't work for me.

Has anyone encountered this or can provide a fix/workaround?

My Versions

I am using IonSlides in my app but due to a bug with them, dynamically adding slides can prove difficult. Because IonSlides is built upon SwiperJS, it has some methods to add and remove slides. The downside to those is that they take a string with HTML in it. In my case, I need to be able to pass in JSX elements so that I can use event listeners on them. Originally, this was my code:

I have an Ionic 6/Angular 10 app using an ion-content content area.

The problem I am running into is that the angular ngAfterViewInit() callback is fired before the DOM is completely rendered so any size queries I do during that callback end up being inaccurate. I have been struggling to find some callback to let me know when the render process has completed so that I can query elements for their final sizes, to no avail.

I came across this github issue discussion: https://github.com/ionic-team/ionic-framework/issues/17920

It seems to imply that one can get a reference to the underlying Stencil based Web Component in order to hook callbacks at that level and get the callback I'm looking for, namely componentDidRender().

However, following the example in the thread does not provide any reference to the methods mentioned in the Stencil documentation.

Is it possible to get a reference to the underlying Ionic Web Component? If so, how?

Thanks.

I am following a tutorial to send and receive data from my server in an Ionic application and I am having trouble doing that because of CORS. I am very familiar with the CORS issue and have used the "Access-Control-Allow-Origin" solution often when connecting my Javascript Ajax code to the PHP backend on my server. However, nothing seems to work for Ionic. I've seen several questions/answers here on SO, as well as read some blogs, and they all say this should work but it doesn't.

I have complete control over my endpoint and have created a PHP file there that looks like this:

I'm trying to change my tab icons from filled to outline when someone selects it (filled when selected, outline when not selected).

On the Ionic 5 Tabs Doc there's a getSelected() method but no examples on how to use this.

My idea was to use ionTabsDidChange to detect when someone clicked a tab, then use getSelected() and set the icon from 'home' to 'home-outline'.

Tabs.html