Events angular treeview component


Topic: Events angular treeview component

Xenia asked 4 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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
Tags