How can I view the components Source Code as Angular Code like in “old times”? Before Stencil I mean.(no bundled / minified / uglified code please 
)
Background: I want to create a new Component which should interact with ion-item like other ionic components do. So that it works with floating labels, disabled state, etc. And generally speaking it often helps to view the source code.
thanks a lot in advance, ~ Chris
may I ask what precisely was not comprehensible about my question? I searched multiple times on google, but didnt find an answer. thats why I created this topic.
I want to see the implementation code of ionic components as it would be programmed in angular. But I only find Stencil code on github. I dont know anything about stencil and it’s yet another abstraction layer. Often times stencil was enough to comprehend things. but not now. So I either have to learn Stencil, or get the human readable angular code.
how can I see for example what the IonItem does in ngAfterViewInit? etc etc
please forgive my english as I’m not a native speaker
kind regards, chris
Just like the majority of people that post in these forums, Because your question is missing a lot of elements for us to understand you properly. You are mixing different things together thus making it hard to understand. If you want the proper answer, you need to help yourself first before we can help you.
Stencil is used to make your own custom components. Ionic team used stencil to make their OWN set of components. By what your questions is asking, seems you want to just see how their own components can be used in angular.
You can view example of ionic components within their docs, they have a playground you can play around with. It provides examples for angular, react and vue.
As for understanding how the components work with angular, you first need to learn how angular works by taking thier tutorial: Angular.
If you don’t know how to use a framework, you will get confused very fast.
hm ok, that’s not what I meant at all. Please forgive my poor wording. I try to express myself better:
I want to see the implementation code of Ionics Components as if it was written in Angular (not Stencil). I’m very familiar with Angular but not with Stencil.
I can give you an example, but for future problems it would be better if I could simply read the Angular @Component Code.
Example: /core/src/components/item/item.tsx
I’ve written a new component which internally is composed of multiple components like ion-datetime and ion-input. But from the outside it should behave as a single component. One problem is that ion-item hard-coded queries it’s children for other ionic components in the private method “setMultipleInputs()”. I don’t want the css class “item-multiple-inputs” to be applies, because that leads to other problems like disabled state not working properly.
see: /core/src/components/label/label.scss
:host-context(.item-interactive-disabled:not(.item-multiple-inputs)) {
cursor: default;
opacity: .3;
pointer-events: none;
}
notice the :not(.item-multiple-inputs)
going back to the item.tsx file I can see
@State() multipleInputs = false;
But I don’t know how this Stencil decorator translates to Angular.
Another issue: When clicking on the item I want to control how my component behaves. But ion-item prematurely focusses my internal ion-input which leads to the keyboard popping up shorty.
see item.tsx/delegateFocus()
TL;DR: before stencil I went on ionics github repository and could simply read and comprehend the source code, as it was written in Angular. Including @Component ngOnInit etc etc. I want to do that again. The examples above are not really important as it wouldn’t help for future problems.