Return values using EventEmitter angular2

Question

I have an EventEmitter that issues an event in the parent component, I want it from the parent component to perform a series of instructions and the result returns it to the caller, this.filteredList I want it to contain the list returned by the parent component but when it returns, filteredList is undefined

This is de chid component "autocomplete.component.ts:" //When returns in this.changeFilter.emit, this.filteredList is undefined:

export class AutocompleteComponent implements OnInit {
    ...

    public filteredList = [];

    @Output() changeFilter = new EventEmitter<any>();


    filter(){
     //This is where I want the filteredList to contain the list returned by the other component:
     this.filteredList =this.changeFilter.emit({query:this.query}); 
     if (filteredList){
        console.log(filteredList); 
      }
    }

the template:

    <div class="container">
    <div class="input-field col s12">
      <input id="clienteAut" type="text" class="form-control bs-autocomplete" style="width:300px;" [(ngModel)]="query" (keyup)="filter()" on-click="filterAll()">
      <label for="clienteAut"></label>
    </div>
    <div class="divLista" *ngIf="filteredList.length > 0" style="">
      <div class="divFila" *ngFor="let item of filteredList">
        <ul >
          <li>
            <a (click)="select(item)">{{item.CodigoCliente}} - {{item.Nombre}}</a>
          </li>
        </ul>
      </div>
    </div>
    </div>

This is the parent component "busquedacompiadoras.component.ts":

//The function "onChangeFilterClientes" return a list with data, but when it returns to the eventEmitter of the child component this.filteredList is undefined //Any ideas?

export class BusquedaCopiadorasComponent {  

clientes: Array<any> //= [];

ngOnInit() {
    this._comunService.getMarcas()
        .subscribe((clientesData) => {
            this.clientes = clientesData as clienteModel[];
            //this.rellenarMarcas(marcasData);
        });
}    

onChangeFilterClientes(obj:any):any[]{        
     this.clientesFilter = this.clientes.filter(c => c.Nombre.toString().toLowerCase().indexOf(obj.query)>-1);       
     return this.clientesFilter; 
}

Because EventEmitter is bases on Observable and the action is async (happens later, when your current chunk of sync code is completed). You need to check for examplengOnChanges to get notified about when value updates have happened. — Günter Zöchbauer
Define filteredList as an @Input() instead, and just set it in the parent. No need to return any value from onChangeFilterClientes. Pass clientesFilter to the child [filteredList]="clientesFilter" (HTML) — Arg0n
Sorry but I don´t understand, you could give an example of your explanation? — ararb78

Surender Kherwa Surender Kherwa · Accepted Answer · 2017-09-12T16:06:44

Try the following:

export class AutocompleteComponent implements OnInit { ...

@Input() public filteredList = [];

@Output() changeFilter = new EventEmitter<any>();


filter(){
 //This is where I want the filteredList to contain the list returned by the other component:
 this.changeFilter.emit({query:this.query}); 
}

And in the BusquedaCopiadorasComponent template pass the filteredList as below:

 [filteredList]="clientesFilter"

Return values using EventEmitter angular2

1 Answers