Programmatically generated html code not working. (click)= event not get fired.
I managed to get the HTML code interpreted and does render a button, but the (click) does not get fired, so no action.
I also tried via Filter / Pipe but this also does not fires a click event.
HACK - Mix with JQuery also not working…
I managed to get a click event onclick with regular JQuery, but then I
can not - or don’t know how to call the “original” click event function
from within Ionic / TypeScript.
It’s hard to say much without seeing any code, but if you’re using innerHtml, directives aren’t going to work. You can try using DynamicComponentLoader, but I really would recommend trying to rethink the design so that it’s not needed.
Yes, it’s innerHtml, coming from a JSON file. Ah, again, this DynamicComponentLoader thing… I always see this gets written down “as a solution”, but nobody seems to know how this works, etc. and it’s far too complicated.
I just read from a JSON file, and need to filter some thing, (12) for example, to make a button like so:
Can’t be that difficult? With Ionic 1 this was no problem by using just a filter. (Now it’s called a pipe I think.)
BTW: I will and have to stick with ionic 1 - without any new UI elements - just because of this simple things not working.
Any advice still welcome for Ionic 2. Ionic 1 was OK, but missing basic functionalities like search-bar, etc. Sharing, etc. only possible with external plugins. Why not create the basics first? Then move on to cool TypeScript? Now one can not switch to version 2 because it’s not working, Ionic 1 missing features only available in version 2. So I’m stuck in the middle getting nowhere…
Angular1 had ng-bind-html and trustAsHtml. They were extremely difficult to use securely, and I think eventually you will come around to not missing them. I have. As for your situation, try something like this?
“extremely difficult to use securely” Really? I don’t think so. That’s the point where many API and UI framework developer get’s wrong. I can say that it is save. Why? Because I use only my local files as a source, not any remote url or remote location. So I know what data is there and what’s not.
I do have something like you example code.
How can this work? I do have simple text that needs to get formatted as HTML basically. So it’s more a HTML then a JSON.
So for example:
“Hello XY, I need (12) pizzas fast!”
Where
(12) would be translated / converted to a button, which should call a function with the argument 12.
Again, the data JSON file is only available in my domain, locally on the device. Not over internet. So I know what the contents of the JSON file is.
Good luck then. I’ve tried to address every concrete feature you said you needed. Either rearchitect your design so you can do it with fixed templates (which I firmly believe is possible, despite your “can’t” and “must”), or go play with DynamicComponentLoader.
You should be able to extend the following idiom to handle any number of potential styles, chosen by a discriminator field in the loop variable. If you prefer, turn each style into a custom component.
Hmm… there is no fixed style / template / pattern.
The only thing that is fixed is “(12)” which should be translated to a button, that’s all. All text except “(12)” or “(n)” (where n is any integer) should be translated to a button with a function call with argument.
So the text “surround” of the pattern “(n)” should be untouched.
More like a “stream” (strings, within JSON) of data, where a pattern “(n)” could be there or not.
No, I just want to have a pattern (n) replaced with a button with a click, that’s all. It’s clear that the simple example with the Pizza order is just an example, not fixed text. There is no moving target here. Pipe / Filter worked with Ionic 1 but it does not work with Ionic 2.
So Ionic 2 is not useful for many apps at all if it can’t handle such a simple thing.
I think that the following suggestion is your best bet for Ionic 2:
This is the answer for Ionic 2 but of course it’s not the only option, i.e. you still could:
Keep using Ionic 1, where as far as I understood everything works as expected.
Propose a new feature for Ionic or Angular - if it’s useful it might be implemented.
Implement the needed functionality yourself and create a PR for Ionic or Angular.
Both Ionic and Angular are open source projects, which means that if something is missing, doesn’t work as expected or is not suited for a particular use case then it’s up to the community to help addressing it.
Ionic 2 certainly can’t handle every possible use case (especially when it’s still in beta). Some people will find it useful while others won’t - just like with every other framework/tool. However since this is such a simple thing I guess that it won’t be difficult for you to implement it yourself.
Hopefully you’ll be able to find the best option for your case.