Styjun

Why did Steve Rogers choose Sam in Endgame?

What's the meaning of こそ in this sentence?

Can you perfectly wrap a cube with this blocky shape?

Why use null function instead of == [] to check for empty list in Haskell?

What to look for in climbing shoes?

Manually select/unselect lines before forwarding to stdout

Can a polymorphed creature understand languages spoken under the effect of Tongues?

How to honestly answer questions from a girlfriend like "How did you find this place" without giving the impression I'm always talking about my exes?

A scene of Jimmy diversity

What do these three diagonal lines that cross through three measures and both staves mean, and what are they called?

Sending a photo of my bank account card to the future employer

Are the errors in this formulation of the simple linear regression model random variables?

Problem with interpolating function returned by NDEigensystem

Is dividends exclusively a part of earnings?

Why don't commercial aircraft adopt a slightly more seaplane-like design to allow safer ditching in case of emergency?

Is there a way to handmake alphabet pasta?

Can't update Ubuntu 18.04.2

What is the technical explanation of the note "A♭" in a F7 chord in the key of C?

I won USD 50K! Now what should I do with it?

Mathematica function equivalent to Matlab's residue function (partial fraction expansion)

Print all lines that don't have numbers, using sed

Is `curl something | sudo bash -` a reasonably safe installation method?

What is the superlative of ipse?

Why doesn't philosophy have higher standards for its arguments?

Onclick event added dynamically created button not working in InnerHTML

Javascript - Dynamically generated event handlers not working(when using innerHTML)escape parameters on onclick event doesnt workHow can I use/create dynamic template to compile dynamic Component with Angular 2.0?How to dynamically add innerHTML with angular 2 componentsBinding directives/events inside InnerHTMLHTML table cell event listeners don't seem to work?Angular innerHTML limitation in dynamic component injection<a> tag click event inside innerhtml in angular 6How to pass (click) event in innerHTML in Angular 6?Onclick event not working in dynamic html string in angular 6

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I get HTML string from the server. Inside the HTML string, I added a button with Id, Text and an onclick event and set to innerHTML. On the UI, the button got created with Id and Text but the Onclick event not working in Angular 6.

Solutions Tried:

1. Created a directive with a button on the template attached the directive inside the dynamic html


2. Created a Component with button on the template attached the Component inside the dynamic HTML

In both, the above cases the button got created but event listener was not working.

And I googled a lot couldn't find a single working example or concrete solution to provide

Any solutions appreciated

typescript angular6 innerhtml dom-events dynamic-html

share|improve this question

edited Mar 26 at 7:53

Tanveer Munir

1,70511 gold badge55 silver badges2222 bronze badges

asked Mar 26 at 7:36

JebinJebin

3788 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm not saying it's not possible, but you should not load dynamic HTML inside an angular component. You can make it work by using the compiler and whatnot, but this means you have to include the compiler inside your AOT build project. You should find another way to obtain the HTML (preferably during build), or another way to handle the click
  
  – PierreDuc
  Mar 26 at 7:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi @PierreDuc Thanks for the response.. can u pls give it with a example code or the process how to associate an event with the Dynamic HTML.
  
  – Jebin
  Mar 26 at 7:47
  

  
  
  
  

add a comment | 

0

I get HTML string from the server. Inside the HTML string, I added a button with Id, Text and an onclick event and set to innerHTML. On the UI, the button got created with Id and Text but the Onclick event not working in Angular 6.

Solutions Tried:

1. Created a directive with a button on the template attached the directive inside the dynamic html


2. Created a Component with button on the template attached the Component inside the dynamic HTML

In both, the above cases the button got created but event listener was not working.

And I googled a lot couldn't find a single working example or concrete solution to provide

Any solutions appreciated

typescript angular6 innerhtml dom-events dynamic-html

share|improve this question

edited Mar 26 at 7:53

Tanveer Munir

1,70511 gold badge55 silver badges2222 bronze badges

asked Mar 26 at 7:36

JebinJebin

3788 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'm not saying it's not possible, but you should not load dynamic HTML inside an angular component. You can make it work by using the compiler and whatnot, but this means you have to include the compiler inside your AOT build project. You should find another way to obtain the HTML (preferably during build), or another way to handle the click
  
  – PierreDuc
  Mar 26 at 7:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi @PierreDuc Thanks for the response.. can u pls give it with a example code or the process how to associate an event with the Dynamic HTML.
  
  – Jebin
  Mar 26 at 7:47
  

  
  
  
  

add a comment | 

I get HTML string from the server. Inside the HTML string, I added a button with Id, Text and an onclick event and set to innerHTML. On the UI, the button got created with Id and Text but the Onclick event not working in Angular 6.

Solutions Tried:

1. Created a directive with a button on the template attached the directive inside the dynamic html


2. Created a Component with button on the template attached the Component inside the dynamic HTML

In both, the above cases the button got created but event listener was not working.

And I googled a lot couldn't find a single working example or concrete solution to provide

Any solutions appreciated

typescript angular6 innerhtml dom-events dynamic-html

share|improve this question

edited Mar 26 at 7:53

Tanveer Munir

1,70511 gold badge55 silver badges2222 bronze badges

asked Mar 26 at 7:36

JebinJebin

3788 bronze badges

share|improve this question

edited Mar 26 at 7:53

Tanveer Munir

1,70511 gold badge55 silver badges2222 bronze badges

asked Mar 26 at 7:36

JebinJebin

3788 bronze badges

share|improve this question

edited Mar 26 at 7:53

Tanveer Munir

1,70511 gold badge55 silver badges2222 bronze badges

asked Mar 26 at 7:36

JebinJebin

3788 bronze badges

edited Mar 26 at 7:53

Tanveer Munir

1,70511 gold badge55 silver badges2222 bronze badges

edited Mar 26 at 7:53

Tanveer Munir

1,70511 gold badge55 silver badges2222 bronze badges

asked Mar 26 at 7:36

JebinJebin

3788 bronze badges

asked Mar 26 at 7:36

JebinJebin

3788 bronze badges

1 Answer
1

active

oldest

votes

0

Angular doesn't process HTML added by [innerHTML]="..."

So you can handle your click event like this.

elementRef.nativeElement.querySelector('button').addEventListener(...)

share|improve this answer

answered Mar 26 at 10:47

Shriniwas bShriniwas b

21622 silver badges1111 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried the below code.. It didn't work either... this.elRef.nativeElement.querySelector('button').addEventListener('click', this.showname.bind(this));
  
  – Jebin
  Mar 26 at 11:05
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55351913%2fonclick-event-added-dynamically-created-button-not-working-in-innerhtml%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Angular doesn't process HTML added by [innerHTML]="..."

So you can handle your click event like this.

elementRef.nativeElement.querySelector('button').addEventListener(...)

share|improve this answer

answered Mar 26 at 10:47

Shriniwas bShriniwas b

21622 silver badges1111 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried the below code.. It didn't work either... this.elRef.nativeElement.querySelector('button').addEventListener('click', this.showname.bind(this));
  
  – Jebin
  Mar 26 at 11:05
  

  
  
  
  

add a comment | 

0

Angular doesn't process HTML added by [innerHTML]="..."

So you can handle your click event like this.

elementRef.nativeElement.querySelector('button').addEventListener(...)

share|improve this answer

answered Mar 26 at 10:47

Shriniwas bShriniwas b

21622 silver badges1111 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tried the below code.. It didn't work either... this.elRef.nativeElement.querySelector('button').addEventListener('click', this.showname.bind(this));
  
  – Jebin
  Mar 26 at 11:05
  

  
  
  
  

add a comment | 

Angular doesn't process HTML added by [innerHTML]="..."

So you can handle your click event like this.

elementRef.nativeElement.querySelector('button').addEventListener(...)

share|improve this answer

answered Mar 26 at 10:47

Shriniwas bShriniwas b

21622 silver badges1111 bronze badges

elementRef.nativeElement.querySelector('button').addEventListener(...)

share|improve this answer

answered Mar 26 at 10:47

Shriniwas bShriniwas b

21622 silver badges1111 bronze badges

answered Mar 26 at 10:47

Shriniwas bShriniwas b

21622 silver badges1111 bronze badges

answered Mar 26 at 10:47

Shriniwas bShriniwas b

21622 silver badges1111 bronze badges