Allow Blazor components injection

I think we should be able to abstract components into interfaces and inject them into other components using DI, the same way we inject other dependencies. Something like this:

TextBox.razor

@inject ILabel Label
@inject IInput Input

<div class="textbox">
    <Label Text="..."/> 
    <Input Value="..." />
</div>

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    services.AddSingleton<ILabel, MyLabelImplementation>();
    services.AddSingleton<IInput, MyInputImplementation>();
}

I know that it’s already possible to render the injected instance of IComponent using RenderTreeBuilder, but the syntax required to do that is incredibly verbose. It would be so much cooler if we could simply use the injected components with the standard syntax we use for any other component.

[javiercn]

We’ve discussed this within the team and we don’t think we’ll implement this in the core framework, given that it has issues with linking and that this can be built on top of the framework if needed.

[FrancescoLorenzetti84]

@javiercn imagine that over time you start building your own library of reusable components, and some of these components internally use other components. For instance: you build a LoginForm component that internally uses a custom Input component. Such LoginForm component will be used many times across different projects, and in some occasions you might want to customize the way the internal Input component looks and behaves without having to re-write the entire LoginForm component.

Now, in my opinion, the most obvious way to do so would be to treat the Input component as a dependency of LoginForm, and to inject such dependency in the DI container. That way, when you want to swap their implementation to achieve a different result, you would simply do:

public void ConfigureServices(IServiceCollection services)
{
    services.AddSingleton<IInput, MyNewInputImplementation>();
}

Since abstraction is a basic design principle when it comes to services, I don’t see why we shouldn’t use it for UI components… And again, what I’m asking can already be achieved, the only issue is that the syntax is incredibly verbose:

@inject IInput Input

<div class="login-form">
   @RenderInjected(Input, new[]
    {
        new KeyValuePair<string, object>(nameof(IInput .Value), "Some value")
    })
</div>

@code {
 
    private static RenderFragment RenderInjected(IComponent component, IEnumerable<KeyValuePair<string, object>> attributes = null) => builder =>
    {
        builder.OpenComponent(0, component.GetType());
        builder.AddMultipleAttributes(1, attributes);
        builder.CloseComponent();
    };
}

So I’m saying, instead of resorting to using RenderTreeBuilder, it would be great if this was an accepted Blazor syntax:

@inject IInput Input

<div class="login-form">
   <Input Value="some value" />
</div>