Develop Reference

How to use child component data in parent component? How to make a binding?

For example, we have one field Input, property 'currentNode' in child component and property 'activeElement' in parent component. Every time we change value in Input, it affects property 'currentNode'. And also, of course, parent component contains child component (I mean HTML).
So, I want that every time currentNode changes somehow, it affected activeElement, which's located in parent component.

Add (change)="" method into your Input field. Then Use #Output() to send the event on every change. While you emit currentNode in your parent. your parent function automatically calls then you can update your parent activeElement with the emitting value
click here to see How you can send data to your parent component

React send new props and then clear state

I have the following situation:
I have a parent React component and a child.
The parent has a table and the child has some controls of its own.
What I want to accomplish is being able to click on a cell in the parent table and have the cell value get transferred over to the child so that the user can edit it there.
This is what I implemented:
I record the cell value in state in the parent on click.
When this I record this value, a re-render happens and the string gets sent to the child via props.
The issue I'm running into is that if something forces a re-render on the parent, that value will get sent to the child again, even though the child may have changed it.
To solve this, what I thought of originally was to send the prop down to the child and then have the child reach back up via a callback to the parent to clear the value in the parent's state. I fall into a loop doing this so naturally it doesn't work.
What is the correct way to send data down into a child component and then have it get cleared post-render?

Each React component update will dispatch a re render action. And when a child component receive new props that component will to re render too.
Note that a child item should be re render only if the props values are news o the inner component state have changed.
For your situation I say: you can pass a object to your child component using props, and execute an function in the parent inside of the child. You only need pass the function in the parent to the child component as a prop, after, execute it inside the child component when you need it.

State that is passed down to children via props should be modified by the parent. I would look into 'react lifting state'
Class Component:
But essentially, your child's handlers (ex. handleClick) should be declared in your parent component and passed down to your child component as an onHandler (ex. onClick=this.onHandleClick) and in the child can be referenced as this.props.onClick
Functional Component:
Basically the same thing but you shouldn't use the this. reference.

Update/refresh a component using another component

I'm sorry for this question but I'm new to react and trying to find best practice on how to update another class component from another class component.
For example I have AddItem.js and ViewItem.js but has the same route. I'm updating ViewItem.js ListGroup by re-rending(componentDidMount()). How can I do this with AddItem.js button onClick?

You can take a new state property in the parent and pass that as props to AddItem and ViewItem and use that prop as a state for these two components and in your button click event you can change the state and react renders the component automatically on state change.
See this simple example

If ViewItem and AddItem are siblings, then you can call methods of each other using ref of another component use ref doc
OR
you can also wrap both with parent component and use parent state for both the child.
If Viewitem and Additem are child-parent or vice versa then you can use pass props and change state based on the change in props.

It can be achieved by creating a parent class (for example Home.js) on top of AddItem.js and ViewItem.js and pass data as props on click to the child component.
In case you if you are using React and Redux it becomes relatively simple on click of a button you can call method in your action.js which will dispatch an action with payload data to the reducer, which can we used by adding mapStatetoProps() in ViewItem.js and AddItem.js, so once you receive the data in your props variables it will reload/refresh that particular component.

Getting focus info of child element or component

I am having a component which may have several child components at same level like
<parent>
<input />
<child>
<input />
</child>
<child></child>
<child></child>
</parent>
Either of child or parent may have input elements.
I am trying to get is if any of input element gets focus then its parent should get a call (other than manual). And if child component gets this info of input getting focus should be able to propagate it to parent without using EventEmitter.
I can use event emitter but if nesting of child increases then it would not be a good way.
Can we do it more simpler?

Use:
#ViewChild in order to get reference to the Childs and access their data from the Parent.
#Input to pass data from the Parent to the Childs.
#Output in order to trigger events from the Childs to the Parent.
If you don't want to use #Output a workaround that you could use is RxJS BehaviorSubject (example here). Basically you emit values from the child using that BehaviorSubject and then you subscribe to those changes from the Parent.

Passing data from parent to specific children in Angular

I have a parent component that loads dinamycally childs components via *ngFor. My parent component loads data for rendering child components. There is extra data needed after on user request.
The html of parent component:
<panel *ngFor="let item of collection" (selected)="onTogglePanel($event, item)">
<div panel-body>
<item-detail
*ngIf="item.detail; else templateLoading"
[detail]="item.detail"
(eventItemLoad)="getExtraData($event, item.detail)"
></item-detail>
</div>
</panel>
Each child component, emits an event to the parent component, that will make an http request for getting the data.
The question is, how can I pass the data to the sepecific child component?
I have been reading about invoking child method from parent, but I don´t know really how to invoke only for specified child.
NOTE: Perhaps my approach of parent getting data and passing to children is not correct and each child should get the data. Any advice for the approach is welcome. Thanks for any help.

The child should get the data on its own.
It looks like you just need item.detail to get the additional data. So if you don't need anything from the parent, just let the child make the http request.
This is about separation of concerns : in Angular you achieve this by creating components, each one serving its specific purpose - and not "messing" with another one if it is not needed.