How to attach a vanilla JavaScript keyup listener to an angular md-autocomplete input using the dom id?

Question

I have an angular md-autocomplete like this:

<md-autocomplete
    md-input-id="myid"
    ...>
</md-autocomplete>

And I want to do this:

document.getElementById("myid")
    .addEventListener("keyup", function(event) {
        //my code
    }
});

Where can I attach that event listener in my angular controller? I am using ui.router. It seems like each page isn't a real new page but just the dom updating. So I think I need an event listener for when that render is complete so that I can access the element with the id.

Answer 1

If you want to bind it to a key event, md-autocomplete has a property called md-search-text-change where you can attach a function on your scope.

Here's an adapted example: https://plnkr.co/edit/Mih3sJTEiTjD2Qhresq6?p=preview

<md-autocomplete md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"></md-autocomplete>

Hope it helps.