Listen to div inner Text changes

Ionic Framework Ionic Angular
1

Okay so I have this div element

 <div id="pose-result" class="layer"></div>

I wanna listen and return the text of that div whenever there’s a change.
Here’s the .ts function

ngOnInit() {
    var result = document.getElementById('pose-result');
      console.log('test')
    result.addEventListener("DOMCharacterDataModified", function (event) {
      console.log('test')
    }, false);
  }

I’ve tried that but It’s not working, any ideas?
I know that OnInit will trigger only once but I didn’t find any solution.

2

Question: How do you set the Text?

3

I’m setting the text from another js file.

const resultLayer = document.querySelector("#pose-result");
resultLayer.innerText = gestureStrings[result.name];
4

Virtually every time I have typed the word “document” in an Angular app I’ve regretted it. I would suggest that a more idiomatic way to do all of this would be to use property bindings as outlined in the Tour of Heroes, chapter 3.

3 Likes
5

Thank you for your answer, can you give me an example how to do that on a div element?

6

The general concepts introduced in the Tour of Heroes should be applicable to div elements.

1 Like
7

lol. Ive been through the same pain.

1 Like
8

Well thanks for the answer but I found another solution. I changed the <div> element to <ion-input> and listened to the changes through (ionChange) event.