Here is the code snippet I am working on:
In this code, a function has been implemented to add two buttons to a component.
Please note that this is purely HTML code.
editFunction = "editRole()";
getActions(Dropup) {
return '<div class="dropdown ' + (Dropup ? 'dropup' : '') + '">'
+ '<button class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="Edit"'
+ '(click)='+this.editFunction+'>'
+ ' <i class="flaticon-edit-1"></i>'
+ '</button>'
+ '<button class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Delete">'
+ ' <i class="fa fa-trash-o"></i>'
+ '</button>';
}
The issue at hand involves the definition of the edit function in Component A and attempting to call and implement it in Component B.
To address this issue, I have created an array called dataFunctions in Component A
dataFunctions: any[] = [];
In the constructor of Component A, I populate this array with the name of the function
constructor() {
this.dataFunctions = [this.editFunction];
}
In Component B, I define a ViewChild:
@ViewChild(CustomDataTableComponent) child;
data : any[];
I then extract the values from the data array:
ngAfterViewInit() {
this.data = this.child.dataFunctions;
console.log("output :",this.data);
}
}
If anyone can offer assistance or guidance on how to resolve this issue, it would be greatly appreciated.
Thank you in advance for your help.