如何将更改事件动态添加到angular 4中的外部dropdownlist组件

Question

I am trying to add a change event to an external dropdownlist component (which is being used in other components) that's been referenced in my current component. However, due to some reason it's throwing me an error as below: Cannot read property '__zone_symbol__addEventListener' of undefined. Below is the sample code for your reference.

External component code --

city.html

<mat-form-field>
  <mat-select placeholder="Select Country" >
    <mat-option *ngFor="let country of countries" [value]="country.id">
        {{ country.name }}
    </mat-option>
 </mat-select>
</mat-form-field>

city.component.ts

@Component({
  selector: 'app-citylist',
  templateUrl: './citylist.component.html'
})
export class CitylistComponent implements OnInit {

  cities : City[];  

  constructor(private citylistService : CitylistService) { }

  ngOnInit() {
     this.getCities();    
  }

  getCities() : void{    
     this.cityListService.getCities().subscribe(resultArray => this.cities = 
     resultArray,
     error => console.log("Error :: " + error));
  }
}

Current component code:

temp.html

<app-citylist #Citylist (ngModelChange)="onVenueChange(selectedCity)" 
    formControlName="selectedCity" name="selectedCity" required 
    ngDefaultControl></app-citylist>        

temp.component.ts

export class tempComponent implements OnInit, AfterViewInit {

ngAfterViewInit(): void {
    this.renderer.listen(this.city1.nativeElement, 'change',(evt)=>{
      alert("It has been clicked");
  }); 
 }
 @ViewChild('Citylist') city1;

 onVenueChange(venueId, formGroup: NgForm ){
      alert("This is test");       
 }
}

Am I following the right approach ? Can someone please advise ?

Answer 1

I see such imperfections in this approach:

1. You want to set change event handler for angular testComponent. But even with usual way you should have Output with name 'change' defined in it to do that.

2. You try to add handler to native element, but you should do that for angular component itself.

3. Actual change event is produced by child component mat-select, so you should put change event handler there and emit value on higher level.

Your approach will not work in the way it is done now