CODEWITHSUNDEEP
htmlangulartypescriptevents
Dawid
Dawid

Reputation: 173

Add (input) to html tag dynamically in Typescript

I have some html that is dynamically generated - I cannot modify it directly.

In this html is an <input class="MyInputClass"> with class specified (without id) and many other atrributes. I would like to handle this input (it's text) so that it does something (let's say: writes itself to console) when something is written to this input.

If I had an access to this in html I would do it like this:

<input type="text" class="form-control (input)="onSearchChange($event.target.value)">

public onSearchChange(searchValue : string ) {
    console.log(searchValue);
}

Source: Angular 2 change event on every keypress

Is it possible to inject such handler?

Upvotes: 0

Views: 1471

Answers (1)

user4676340
user4676340

Reputation:

No, you can't.

When you write 

<input type="text" (input)="doSomething()" />

You don't actually tell

I want this input to make something on the input event

But you actually tell

I want Angular to create an event handler that will make something on the input event.

This means, dynamically generated HTML won't have the capacity of having any Angular feature.

BUT, what you can do, is in your component, in the ngOnInit function, create window functions, that you will destroy in your ngOnDestroy function.

Something like this

ngOnInit() {
  window['onXXXInput'] = (value) => {
    /* do something */
  }
}

ngOnDestroy() {
  delete(window['onXXXInput']);
}

Now in your dynamically generated HTML; you can simply do 

<input type="text" oninput="window.onXXXInput(this.value)" />

Upvotes: 1

Related Questions