how to call child component method from parent component in blazor?

Question

i have two component. The first component includes list of model and the second component contains modal form I want to click on the model when inside the first component In the second component, open modal and edit the model how to call show function in child component from parent component

<ChildComponent />
<button onClick="@ShowModal">show modal</button>
@code{
    ChildComponent child; 
    void ShowModal(){
        child.Show();
    }
}

i'm used @using but this code has error :

the type or namespace name ChildComponent coud not be found

Solution 1

First you need to capture a reference of your child component:

<ChildComponent @ref="child" />

Then you can use this reference to call child component methods as you do in your code.

<button onClick="@ShowModal">show modal</button>
@code{
    ChildComponent child; 
    void ShowModal(){
        child.Show();
    }
}

The namespace of your component need to be added by a using either in the page or in _Imports.razor. If your component is in the sub folder Components/ChildComponent.razor then its namespace is {YourAppNameSpace}.Components

@using MyBlazorApp.Components

read the code

Solution 2

Here is an article I just posted on the subject using Interfaces:

https://datajugglerblazor.blogspot.com/2020/01/how-to-use-interfaces-to-communicate.html

In this example, the Index page is an IBlazorComponentParent object.

On the Login Component, the cool part is to set the Parent property, you just set Parent=this:

The way it works is the setter for the Parent property on the Login component calls the Register method on the parent:

[Parameter]
public IBlazorComponentParent Parent
{
    get { return parent; }
    set 
    { 
        // set the parent
        parent = value;
        // if the value for HasParent is true
        if (HasParent)
        {
            // Register with the parent to receive messages from the parent
            Parent.Register(this);
        }
    }
}

Then on the parent component or page, the Register method stores the reference to the component:

public void Register(IBlazorComponent component)
{
    // If the component object and Children collection both exist
    if (NullHelper.Exists(component, Children))
    {
        // If this is the Login component
        if (component.Name == "Login")
        {
            // Set the Login control
            this.Login = component as Login;
        }
        // add this child
        Children.Add(component);
    }
}

At this point, the parent and the Login page can communicate with each other as they both contain a ReceiveData method where you can send messages.

Comments

[Jason Ayer]

How would you write this with child components rendered in a foreach loop?

[agua from mars]

@JasonAyer With an other component containing the ChildComponent and the show modal button for the ChildComponent. So, just foreach this one actually.

[Jason Ayer]

I just tried that using your code as an example as is and it only calls the method from the last component rendered. not all of them.

[Jason Ayer]

Added - stackoverflow.com/questions/62519575/…