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.
Related
I have a child sidebar component with some dropdowns. Simplified example:
You select a status here and it re renders the table/dashboard view in the parent component. That is handled via $emit in the child component like so:
selectedStatus: function(status) {
this.$emit('updateStatus', status)
},
No issues there. Now I'd like to be able to clear or reset this input from the parent component. As I said this is a simplified example and there are many dropdowns, a couple datetime selectors, and other inputs to clear.
If I do something like
this.selectedStatus = [] in the parent, it does indeed reset/re render the table/data properly but it still shows the UI piece (ie, the selected status in the dropdown).
If I do something like
this.selectedStatus = [] in the child it does correctly remove/alter the UI piece to where it clears the dropdown.
What is the correct approach here to clear child filters/inputs from the parent?
I recommend you to read this article, it explains all the ways to make a child component rerender (and therefore reset it's 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.
I have a big component that has 3 important functions in it--Search, Filter, and Display. I want to put each function into its own component. Filter uses a function from Search, and Display uses a function from Filter. So to pass the functions via props to each component would force me to make Display a child component and Search the parent: Search --> Filter --> Display.
Search is merely a container with logic, and it doesn't make much sense to have it be the parent component. It would be ideal if I could have the structure be Display --> Filter --> Search. Although that would require me to pass the Search function up to the parent component Filter, and Filter pass its function up to the parent component Display.
My question is, what can I do to get these components in the right order, so Display becomes the parent component, yet each component still gets the functions they need from the other components?
I am adding child component dynamically using ComponentFactoryResolver and able to using ngModel in the child component but it's working as a one way data binding rather than two way.
I tried by adding child component tag and it's working but in my case I can't add that. So need a solution with ComponentFactoryResolver. Please check the below stackblitz for better understanding. i need the parent component vlue to be update on second text box value change.
Example Stackblitz.
const factory = this.componentFactoryResolver.resolveComponentFactory(AppChildComponent);
const component = factory.create(this.ViewContainerRef.parentInjector);
component.instance['childData']=this.parentData;
this.ViewContainerRef.insert(component.hostView);
I'm new to Angular, and as the title states, I'm trying to see if this is doable.
Instead of using the standard way of a sub-component sending data via it's #Output EventEmitter, I would like to have the same concept (without injecting the parent into the child) but with the parent component emitting data to a child. Can a parent component emit data to a child? If not, why is that so?
Just to clarify, the sub-component is a form that gets filled in. As soon as the form is complete I want a button on the parent component to see if the form was complete before submitting it.
This was achieved simply by interacting with the child component using a template reference variable.
Add the variable to the child component selector element and access its properties and methods with it from the parent template:
<child-selector #variable ></child-selector>
<button (click)="variable.ChildMethod()"/>
Alternatively, access the child component method/properties directly from component class:
<button (click)="AccessChildMemebers(variable)"/>
AccessChildMemebers(elem){
elem.ChildMethod();
}