Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

134
Vistas
How to emit an object with its value

I have an EventEmitter and i am emitting an object as below:

@Output() cellClick = new EventEmitter();
private _cellClicked(data: any){
      let emitData: any = {
        colId: data.column.colId,
        rowId: data.node.id,
        item: {}
      };
      if (emitWithdata){
          this.cellClick.next(emitData); // Here  i need to send my data also, and it need to append to the value Data.item=data not just the Data object.
      } 
      if (emitWithNodata){
              this.cellClick.next(emitData); // here i just pass the emitData with empty item, which is correct
      }


}

How to pass the data with the emitData? Any idea guys? Thanks in advance

about 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

If we follow Angular EventEmitter API: https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html

  1. change the EventEmmiter declaration to use : EventEmitter
  2. To send the data you have to use the emmit method.

Your code should be like this:

@Output() cellClick: EventEmitter<any> = new EventEmitter();
private _cellClicked(data: any){
      let emitData: any = {
        colId: data.column.colId,
        rowId: data.node.id,
        item:{}
      };
      if (emitWithdata){
          emitData.item=data;
          this.cellClick.emit(emitData); // Here  i need to send my data also, and it need to append to the value Data.item=data not just the Data object.
      } 
}
about 4 years ago · Santiago Trujillo Denunciar

0

To send data back to event handler, you can write like this:

this.cellClick.emit({data : emitData, orderData: someData});
about 4 years ago · Santiago Trujillo Denunciar

0

This is how you do it as of Angular 11. I'm sure older versions are somewhat similar. Also, you can learn more details by reading the documentation on Event Binding.

You can definitely use an any object declared on the fly, however this example will show how to do it using a strongly typed object.

A strongly typed object, declared somewhere in your application:

export interface MyCustomObject {
    rowId: number;
    columnId: number;
    item: any;
}

Child markup:

<div (click)="onCellClicked()"></div>

Child component's TS file:

import { MyCustomObject } from './some-file.models';

@Component({
    selector: 'child-component',
    templateUrl: './child-component.component.html',
    styleUrls: ['./child-component.component.less']
})
export class ChildComponent implements OnInit {

    //whatever name you assign this Output variable,
    //is the event name you'll bind to on the parent markup
    @Output() cellClicked = new EventEmitter<MyCustomObject>();
    
    constructor() { }
    
    public onCellClicked(): void {
        const obj: MyCustomObject = {
            rowId: 5;
            columnId: 24;
            item: {
                foo: 'abc'
            };
        }
        
        this.cellClicked.emit(obj);
    }
}

Parent markup file which makes use of Child component:

<!-- $event param will hold the passed value -->
<!-- also notice the use of (cellClicked) as defined by the childs Output variable -->
<child-component (cellClicked)="onChildCellClicked($event)"></child-component>

Parent TS file:

import { MyCustomObject } from './some-file.models';

@Component({
    selector: 'parent-component',
    templateUrl: './parent-component.component.html',
    styleUrls: ['./parent-component.component.less']
})
export class ParentComponent implements OnInit {

    constructor() { }
    
    public onChildCellClicked(event: MyCustomObject): void {
        //do something on the parent with the data
        console.log('parent cell click event: ', event);
    }
}
about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda