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
EventEmitter is an angular2 abstraction and its only purpose is to emit events in components. Quoting a comment from Rob Wormald. [...] EventEmitter is really an Angular abstraction, and should be used pretty much only for emitting custom Events in components. Otherwise, just use Rx as if it was any other library.
EventEmitterlink. Use in components with the @Output directive to emit custom events synchronously or asynchronously, and register handlers for those events by subscribing to an instance.
If we follow Angular EventEmitter API: https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.html
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.
}
}
To send data back to event handler, you can write like this:
this.cellClick.emit({data : emitData, orderData: someData});
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);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With