Way to publish node name changed from child route component

Question

I have the following:

TreeViewComponent which shows a node tree. When clicking a node the node details opens in a child router-outlet(so I can see both the tree and details at the same time). Here the user can change details about the node details.

In the details view, the user can change the name of the node, amoung other details.

This opens up two issues that I want to solve the best way.

Sorting, before the nodes is sorting on the server, but if the name changes I need to resort the items. I have read this can be an issue and why the Angular devs have removed the sorting pipeline. The recommendation is to sort in the Component.
Update the node name of the selected node.

I have some ideas but want to do it the best way.

For the sorting ... I could just fetch the node tree from the server, but this would also require me to publish some kind of event.
When selecting a node in the tree, put that into a service. Have the tree details component update it ... not sure if this is the right way. Also ... not sure it will work with the change detection strategy. ( new to angular )

I have searched around and found this: How to subscribe to an event on a service in Angular2? - Is this the way to go? It's still a bit abstract for me ... but just want to make sure I go about it the right way.

This is an app I'm converting to Angular, to convience the rest of team that we should change ... in VueJS we had a VuexStore, this is very easy got very messed up and bloated, maybe we were doing it the wrong way. But I REALLY like Angular for the fact that there is guidelines for most things. How to stucture and create apps. Pure love...

Let me know if more information is needed.

score 0 · Accepted Answer · answered Apr 11 '18 at 08:16

The proper way to pass information from a child to a parent component is through events.

So, for your second point: your child component emits an event when the name of a node changes.

Output() nodeChange: EventEmitter = new EventEmitter();
onNodeChange() {
  this.nodeChange.emit('...data you want to pass to the parent...')
}

And your parent component simply has to listen to those events. In the HTML:

<my-child-component (nodeChange)="renameNode(...your data...)"></my-child-component>

In the class:

renameNode(data) {
  ... do something
}

This is a really good and detailed answer that explains how to deal with events in Angular.

To go back to your first point, yes, the Angular team removed the sorting pipe as it was considered highly inefficient. The solution is to simply sort the tree again in the component when a node is updated. How exactly you do that is up to you and depend on the details of the implementation.

Way to publish node name changed from child route component

I have the following:

I have some ideas but want to do it the best way.

1 Answers1