Topic: Events angular treeview component
Expected behavior On clicking the element of the node I must receive in console.log some events due to documentation. Actual behavior But when I clicked and added this event to my code I have not any reaction. I changed some events (click)="onCheck($event)" just so, it work. Resources (screenshots, code snippets etc.)
onCheck(e: any) {
console.log(
"%c Returned checked object ",
"background: #222; color: #ff8080"
);
console.log(e);
console.log(
"%c ************************************ ",
"background: #222; color: #bada05"
);
} and I put the code in the html file:
<mdb-tree
(checked)="onCheck($event)"
(checkedKeys)="onCheckedKeys($event)"
(nodesChanged)="onNodesChanged($event)"
textField="name"
childrenField="children"
[nodes]="dataForTree"
></mdb-tree>
Nothing happened. What I did wrong. Thank you.
Arkadiusz Idzikowski staff answered 4 years ago
Those events are emitted in the example with checkboxes when you check a specific node:
https://mdbootstrap.com/docs/angular/components/treeview/#advanced-example
I double-checked that and it looks like everything is working correctly.
Xenia commented 4 years ago
(nodesChanged)="onNodesChanged($event)" I don't use checkboxes but nodeChanges must work. I placed these three events, but no one work. And I have an additional question. Due to the model of tree "children" and " name" I have in my model "id" which I would like to get by clicking on the node. The name I can get from $event but 'Id' I didn't see there. How to do in the additional way or atrribute to do that. It my model. export interface CounterpartyGroupTree{ name:string; id: number; children?:CounterpartyGroupTree[];
}
Arkadiusz Idzikowski staff commented 4 years ago
The events return the node list that you passed to the component. If the node object contains 'id' property, it should be returned correctly in the event response. We will take a closer look at those problems and add new events that may be helpful for such use cases.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 10.1.1
- Device: Asus
- Browser: Chrome
- OS: Windows 7
- Provided sample code: No
- Provided link: No