Angular4 "change" listener only fires once

Question

I have a selection dropdown that I'm drawing data from that changes based on the selection. It will fire fine on first load, but wont change again until I reload or redirect.

    getLogs(){
  document.getElementById("placeSelect").addEventListener('change', (e:any)=>{
    this.placeService.getPlace(e.target.value).subscribe((e:any)=>{        
      this.personService.person(e.data.place.person.id).subscribe((e:any) => {
        this.logs = e.data.person.logs
      })
    })
  })

}

I am calling this on the component's "ngOnInit", maybe that's the issue? Any ideas would be helpful.

forget about event listeners. in template, put `select (change)="onChangeHandler($event)"...>` and then in your component have method `onChangeHandler(event)` — dee zg, May 24 '18 at 19:14
See this link would help https://stackoverflow.com/questions/36150107/angular-2-change-event-model-changes — Sanjeet kumar, May 24 '18 at 19:15

score 0 · Answer 1 · answered May 24 '18 at 19:33

0

This may helps you.

Add this code in imports of Module.ts

import { FormsModule } from '@angular/forms';
imports: [FormsModule]

Inside component.ts

 myModel(e: Event) {
    console.log(e);
  }

In Component.html

   <select (ngModelChange)="myModel($event)" [ngModel]="mymodel">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">2</option>
</select>

answered May 24 '18 at 19:33

Sanjeet kumar

3,333
3
17
26

I guess I should've clarified. My apologies. But the select and where the data is being displayed is on two separate components. – ASummers May 25 '18 at 12:49

score 0 · Accepted Answer · answered May 30 '18 at 19:08

Thanks for all the advice, but I managed a work around. The biggest hurdle is that the select was in a different component (which I apologize for failing to mention) so I had to export the select information to my component where the info would be displayed.

component2.ts

import { userInfo } from '../../component1';

And then a set a delay so that it would initiate the listen after both components are fully loaded. It seems it was firing before in my previous version

ngOnInit() {
if(userInfo.place){
  this.getLogsfromPlace()
}    
setTimeout(()=>{
  this.startupUserInfo = userInfo
  document.getElementById("header").addEventListener('change', (e:any)=>{
  this._placeService.getPlace(userInfo.place).subscribe((e:any)=>{
    this._personService.person(e.data.place.person.id).subscribe((e:any) => {
      this.logs = e.data.person.logs
    })
  })
})  }, 3000);
}

Much appreciated!

Angular4 "change" listener only fires once

2 Answers2