Within my application, I am working with three main components:
- Component A: Connects component B and C
- Component B: Displays a grid of objects
- Component C: Shows detailed information when a row in the grid of component B is clicked
+---------------------+ | A | | +------+ +-------+ | | | B | | C | | | | | | | | | +------+ +-------+ | +---------------------+
export class B{
@Output() rowClicked= new EventEmitter<{objectOfInterest: any}>();
public onCellClick (e){
this.rowClicked.emit(e.dataItem);
}
}
The KendoUI grid is set up to trigger the event like this:
(cellClick)="onCellClick($event)"In component A's template, I use the following selector:
<B (rowClicked)='C.processData($event)'></B>Next, we have class C:
export class C{
public objectOfInterest: any = {};
constructor(){
this.objectOfInterest= {'name': 'blaat'};
}
public processData = (objOfInterest) => {
this.objectOfInterest= objOfInterest;
console.log(this.objectOfInterest.name);
}
}
Despite the correct printing of the object name in the console, the issue arises when trying to display it in the template of C using string interpolation like this:
Editing {{objectOfInterest.name}}Editing {{objectOfInterest?.name}}or
<div *ngIf="someBool">{{objectOfInterest.name}}</div>but none of these produced the desired output.
I suspect that I may be in the wrong context of this, but when I log this inside the processData function, it correctly displays the objectOfInterest and processData method.