How can I refer to a component created via DynamicComponent in Blazor?

Question

I am rendering components using DynamicComponent and I need to call a function found in the child component.

I cannot find the equivalent of using @ref for DynamicComponent so that I can call a function of the dynamic component.

This is the parent component

 <div class="tab-content">
            @foreach (VerticalTabComponent.TabModel oneTabItem in VerticalTabsList)
            {
                <div class="tab-pane fade show @(oneTabItem.TabIndex == SelectedTabIndex ? "active" : "")" @key=@($"VTabDivDynamic_{TabPrefix}_{oneTabItem.TabIndex.ToString()}")>
                    <DynamicComponent
                              [email protected](oneTabItem.TabComponent)
                              [email protected]>
                    </DynamicComponent>
                </div>
            }
        </div>

This is the code in Blazor Component Tab

 public partial class TabComponent
{
    [Parameter]
    public EventCallback<string> InsertUpdateCallback { get; set; }

    
    protected override async Task OnInitializedAsync()
    {
       await CallAnyfunctionAsync();
    }
    private async Task<bool> LoadDataGrid()
    {
       //this is the function I need to call from parent
    }
}

How can I call the LoadDataGrid function from the parent component?

Inviolable

Answer 1

There is an easy solution. Not sure if that is new but the ref-attribut does exist for the DynamicComponent! You can use it like this:

<DynamicComponent Type="typeof(MyComponent)" Parameters="@MyParameters" @ref="dc" />

and in Code-Behind:

private DynamicComponent? dc;

private MyComponent? MyComponentRef
{
    get
    {
        return (MyComponent?)dc?.Instance;
    }
}

Ovi

Answer 2

Normally in Blazor we use @Ref to get a reference to a component, but as you've seen this won't work with a DynamicComponent.

A workaround for this would be to add a [Parameter] to the component called something like Register which is an action with the generic type set as the component type. You can then add code to handle OnParametersSet to call this method in the component.

You can then add a Register parameter in your TabParameters which gets updated with a reference.

Example code below would be added to the TabComponent component:

    /// <summary>
    ///  will be called when params set
    /// </summary>
    [Parameter] public  Action<TabComponent> Register { get; set; }

    protected override void OnParametersSet()
    {
        if (Register != null)
        {
            // register this component
                Register(this);
        }
    }

You add a Register parameter with an Action<TabComponent> value. Here's an example:

    TabComponent tc1 = null;


    void Register1(TabComponent tabComponent)
    {
        tc1 = tabComponent;
        Console.WriteLine("Tab component 1 has title " + tc1.Title);
    }

    protected override void OnInitialized()
    {
        Action<TabComponent> p1 = Register1;

        params1 = new Dictionary<string, object>()
        {
            { "Title", "Title Here" },
            { "Register", p1 }
        };
    }

    IDictionary<string, object> params1;

Pasadena

This is great, but it's quite confusing what SurveyPrompt is meant to be in your example code? Does it represent the parent component? Or a separate class? – Facies

@Facies SurveyPrompt is TabComponent. I have updated the answer. – Goebel

@Goebel my error copying a sample - thanks for correcting – Pasadena