angular: Programmatically generated html code not working. (click)= Pipe Filter Render Event Button
I’m submitting a … (check one with “x”)
[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
See here for more details: https://forum.ionicframework.com/t/programmatically-generated-html-code-not-working-click-pipe-filter-render-event-button/50783
HTML buttons are created, but onclick event does not get fired. The buttons are in the HTML but there is no click action.
Expected/desired behavior HTML buttons are created, AND onclick event does get fired as in Angular 1.
Reproduction of the problem If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
What is the expected behavior? HTML buttons are created with onclick events.
What is the motivation / use case for changing the behavior?
It must be possible to create buttons with onclick events on-the-fly reading from an input file JSON. Stream is from well known source (locally). So it is not a security issue. The contents is: “Blabla … (12) … bla bla.”
This should give this output: “Blabla … <button id=“12” (click)=“doAction(‘12’);”>12</button> … bla bla.”
So the only pattern is (n) where n is an integer, whole positive number as in “N”.
Please tell us about your environment:
- Angular version: 2.0.0-beta.25
- Browser: [all ]
- Language: [all ]
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 29 (12 by maintainers)
@mlc-mlapis write down a solution. “12” is just an example and is variable and comes from the input stream / file locally. So it must be able to SCAN (where “n” is an integer, 1…n)
and transform it to
A solution using Pipe and Directive: Stackoverflow Plunker Demo
Unfortunately there is no easy way if any. According to the authors of angular this is an security issue which is sure NOT the case if you load your own well known JSON data from a local source. So I had to leave angular because of that stupid so called pseudo security limitation. Angular is not usable anymore if it can’t transform simple well known data on-the-fly.
On Thursday, October 19, 2017, Kenny Vivas notifications@github.com wrote:
– Freundliche Grüsse / Kind regards
Michael Mustun
@mlc-mlapis (This is the “answer” I always get.) If its so simple why you do not just write it down here:
@mlc-mlapis What is “AOT mode” ? This is a basic “answer” I always get, without any solution at all. Angular 1 worked, Angular 2 not.
What I need was (no solution so far…):
INPUT: “Blabla … (12) … bla bla.”
OUTPUT: “Blabla … (<button id=“12” (click)=“doAction(‘12’);”>12) … bla bla.”
NOTE:
@flagsoft … yep, usually … so it’s another binding … to some
propertywhich is defined in the component class. And because in AOT you don’t have compiler (and this would be THE THING which would scan) in run-time (usually), you can’t do it.You are still mentally blocked to the logic of AngularJS and you are looking for something what is not in Angular directly by the same way as in AngularJS.
As I said before there are other ways which are available … the first is the general idea to not generate dynamically HTML at all but to load JSON data and have a component that renders that JSON data through its template, … and so on. There are other ways … as to use AOT app and load also JIT compiler (lazy load), use Angular Elements, use dynamic parsing and dynamic creation of component instances, …
@kennyvivas … you are looking from the opposite side (from where you want to do many things dynamically in run-time and what also mean direct manipulation with DOM). Angular is not going this way. There are many reasons why it is. The main idea is to use AOT mode (= templates are compiled ahead of time) … the app is based on just JS code without any HTML in run-time.
Just think of it as … loading just data (JSONs) and transforming / showing them via already existed components (with
@Inputsand@Outputs) and NOT loading any HTML and doing something with it in run-time.As you described before … if your main problem is to transform #TAG to something else then really using the
@Pipeor instantiating of dynamic components in #TAG places (which could be much more general mechanism) could be the right way.@flagsoft Hi dude, I am having exactly the same issue here. Did you managed to solve it or are you able to point me in some direction?
outdated. use RC6.
Please also describe better the expected / actual behavior and the steps to reproduce. Thanks.