Get instance of dynamically created component

[Sascha-L]

Hi,

I need to create multiple components dynamically at runtime and insert them at dynamically created containers.

So at development time I don't know how many containers will be available, where are they placed and which components will be created and in which container they will be inserted. All this should happen at runtime.

With BuildRenderTree I'm able to create HTML at runtime and insert this at a specific place on my page. It is also possible to call OpenComponent on the RenderTreeBuilder but you can't hand over an instance of your component, you only have the possibility to specify the type of your component and Razor will then create an instance of your component. So you don't have the reference to this created instance and can't call methods, etc. of this component. Also everytime the BuildRenderTree method is called the same instance of the previously created component will be used by Blazor.

Is it possible to create a full component at runtime by code, have an instance of this component and place the component on your page? With BuildRenderTree, DynamicComponent and RenderFragment it seems not possible. Is there anything else or should I create an issue so this can be added in a future release?

[ProgramGeek02]

any update?

[mr-baraiya]

In Blazor, components are created and managed by the renderer, so you generally cannot manually create an instance and control its lifecycle yourself.

When you need to render components dynamically, the recommended approach is to use DynamicComponent. You can pass parameters and track instances through state or callbacks rather than directly accessing the component instance.

Example:

<DynamicComponent Type="@componentType" Parameters="@parameters" />

If you need to interact with the component, a common pattern is to pass a callback or service through parameters so the dynamically created component can communicate back to the parent.

Directly instantiating and controlling component instances is not supported because Blazor’s rendering system manages component creation and reuse internally.

[bzd3y]

@mr-baraiya has a good answer, but I think it might be missing something, which was having the reference to your component.

Extending their example, you should be able to do something like this:

@code
{
    private SomeComponent _theComponent; // this can go in the code-behind if there is one.
}

<DynamicComponent Type="@componentType" Parameters="@parameters" @ref="_theComponent" />

This works with statically rendered components, but I have't tried it with DynamicComponent. I would think it would work, but my concern is that since DynamicComponent is an IComponent itself, the reference might point to it as the instance and not the component it is handling. But it may be smart enough to manage that.

With that being said, you should also be able to do this in BuildRenderTree, which might be a better option anyway, depending on what you are doing. For future reference, because of the way Blazor works, I'm pretty confident that anything you can do in Razor you can somehow do in BuildRenderTree. It just might not be as straightforward.

So the analog of the above code would be something like this:

    private SomeComponent _theComponent;
    private List<IComponent> _components = [];

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        // you'll probably need to track/manage these sequence indexes, but I just hard coded them.
        builder.OpenComponent<SomeComponent>(0);
        builder.AddComponentReferenceCapture(1, o =>
        {
            _theComponent = o as SomeComponent; // I think you can/should avoid null checks here; if o is a SomeComponent then set it, otherwise, set the reference to null. I'm not sure why this method isn't a strongly typed generic or at least why one isn't available.

            // or maybe for your purposes you need to add it to a list of components. This is something that is much easier to do in BuildRenderTree than it would be in Razor. I'm not sure it is even really possible to do that in Razor.
            _components.Clear(); // I think you want to clear this every time, because if they don't get rendered in this pass then you probably don't want them in the list and you won't have a reference to them to remove.

            if (o is IComponent component)
            {
                _components.Add(component);
            }
        });
        // ... build the rest of the component ...
    }

EDIT: Out of curiosity, I looked at the code for DynamicComponent to see if it was "smart" enough to handle the reference capturing. The answer is "yes and no". So, "Yes", because it actually uses AddComponentReferenceCapture(), similar to the above, to get a reference to the component it is managing and then sets a public property named Instance to that. So you should be able to use the Razor example above and capture the DynamicComponent and then access your component through its Instance property. But also "No" because it has no casts or anything else that might allow the engine to just assign it to a variable or member of the type it is managing. But I was assuming DynamicComponent was generic, which come to think of it, wouldn't be quite as "dynamic". The engine might still know to use Instance to "forward" the reference of the managed component to whatever is capturing it.

Either way, if you don't need a collection of your dynamic components then I think you can use either method. If you do need a collection then I think you need to use the BuildRenderTree method.