CODEWITHSUNDEEP
javascriptangulartypescriptbinding
M.Pico
M.Pico

Reputation: 57

Angular binding @input behavior not working propertly

I'm having some issues with the Angular EventEmitter and angular @Input.

My app has 3 components: 2 components (TableComponent and MapComponent) that do not interact between them, and an extra component that is like the father of those two (BodyComponent).

TableComponent defines the following @Input

  _oportunidades: Item[];
  @Input() set oportunidades(oportunidades: Item[]){
    debugger;
    this._oportunidades = oportunidades;
    this.dataSource = new MatTableDataSource<Item>(this._oportunidades);
    this.dataSource.paginator = this.paginator;
  }

The MapComponent defines: 

 @Output() event_emitter_for_items_filtered_by_polygon = new EventEmitter<string[]>();
  send_new_map_information_to_body(){
    this.event_emitter_for_items_filtered_by_polygon.emit(this.items_filtered_by_polygon);
  }

  add_function_that_sends_filtered_items_to_body_after_polygon_is_draw(){
    var self = this;
    google.maps.event.addListener(this.drawingManager, 'polygoncomplete', function(polygon) {
      self.filter_items_by_polygon(polygon);
      self.remove_markers_from_map();
      polygon.setPath([])
      self.send_new_map_information_to_body();
    });
  }

When the procedure send_new_map_information_to_body is triggered. Sends the modified data to the BodyComponent. The BodyComponent catches it without errors. The BodyComponent html is shown here:

<div class="analysis">
  <app-mapa (event_emitter_for_items_filtered_by_polygon)="items_filtered_by_polygon($event)" [items]="map_data"></app-mapa>
  <app-tabla [oportunidades]="oportunidades_filtradas"></app-tabla>
</div>

The procedure items_filtered_by_polygon modifies the oportunidades_filtradas variable defined in the BodyComponent. Until now, everything is ok.

  items_filtered_by_polygon($event){
    this.oportunidades_filtradas = []
  }

The variable oportunidades_filtradas is binded to the oportunidades variable in the TableComponent (as shown in the BodyComponent html), when items_filtered_by_polygon method changes oportunidades_filtradas the @Input() set oportunidades(oportunidades: Item[]) is not triggered. So, no changes are shown in my TableComponent.

When the app starts, and data is distributed through the components, everything works as expected. Just in this case, when trying to modify the TableComponent content as explained, nothing happens.

In the devtools console of chrome, no errors are shown. And the flow of the app does not feel strange, just nothing happens. Sometimes, we thought that the modifications are being done, but maybe they are terrible delayed? Maybe is some kind of async issue?

I'm kind of new in Angular and maybe I am not understanding something. All other binds in my app are working...

What do you think? Any help is welcome! Thanks!

Upvotes: 1

Views: 63

Answers (1)

mgm87
mgm87

Reputation: 894

This sounds like there may be a change detection issue happening. Depending on your change detection strategy things like this can happen. Try using ChangeDetectorRef.detectChanges() in your items_filtered_by_polygon function to see if that's the issue. If it works you can leave it there or remove it and use an observable for the input that isn't triggering.

Upvotes: 1

Related Questions