Platform Specific Styling Of Standard HTML Input Types

Due to the fact that there are a number of issues with masking an ion-input, I am looking at making use of other controls/elements. With this decision comes a need to properly style the element. I have briefly played around with attempting to grab the styling from an already themed element by using ViewChild and typing the variable to IonInput. Has anyone done this? On the right track?

@danieldugger Could you describe exactly what you are looking to do? Create your own components, or strictly customize Ionic elements? Manipulate your DOM parts are they Shadow Parts or similar?

I have a DevExpress subscription and would like to style their masked input control and date time picker so that it matches Ionic’s controls.

@danieldugger

Working with Ionic Framework is working with Web Technology: Everything that you can design on the Web is possible in Ionic and by extending your customization with the properties that the framework allows you.

I also believe that DevExpress allows importing your elements with DevExtreme for Angular/Ionic as per their documentation stating so:

:link: https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Other_Approaches/Using_Ionic/

–

DevExpress support also ensures that you can import your elements into Angular Project out of the box and modify them your way:

–

Enter this link and let us know:
:link: https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/

Thanks. I am aware of the fact that they can be used in an Angular project and that they can be customized, which is why I asked the question of how to most efficiently code the customization so that it can be future proof as Ionic modifies their control suite.

1 Like

Perfect @danieldugger :metal:
If you understand that the content that I shared may be useful to you, you could mark it as a solution and if not, you could keep asking if I still cannot understand your question. :wink:

I am wanting to find the most efficient and future proof way to access the styles that are applied to Ionic controls so that they can be applied to other controls.

Since you’re involved in the convo on #15424, I suspect you’ve already given this considerably more thought than I have, but that discussion is still going on, and still feels like a lighter lift than the direction you’re suggesting here, primarily because of the dynamically adapting nature of styles, especially on something like <ion-input>. On events like focus gain/loss, value change, and blur, there is a private method emitStyle that gets fired.

You would have to either use some sort of static analysis to draw out those possibilities, or try triggering equivalent events on your “shadow” component, which strikes me as extremely problematic, especially for focus.

What I have suggested doing before for arbitrary input restriction is a split ngModel binding. I assume you’ve already tried the directive approach, or some library that does so. Any chance you’d be willing to entertain another go at that strategy, or are you wedded to this chameleon idea?

@rapropos, I am certainly not wanting to reinvent the wheel. I thought that it might be somewhat easy to restyle other controls if I could gain access to the styles applied to Ionic’s components. I am most definitely interested in exploring whatever solution will allow me to provide my user’s with the best experience and not create an unmanageable mess for me.

Yeah, I initially thought it was a promising approach as well, but after looking at the source, I think it’s a bit like trying to impersonate somebody. I fear you would have to get photos of them wearing a business suit, ripped concert T-shirt, and evening gown in order to pull it off.

Unless, of course, you’re only interested in a specific outfit. I’m gathering that’s not the case.