BlazorFiddle - Blazor .Net Developer Playground and Code Editor in the Browser.

Index

MyBaseComponent

@page "/"

<h1>Example One</h1>
<p> Consumer passes no parameters. Default values for <strong>Header</strong> and <strong>ChildContent</strong> from derived component are used.</p>
<p style="font-style: italic">code</p>
<code>@ExampleOne</code>
<p style="font-style: italic">output</p>
<MyDerivedComponent/>

<hr/>

<h1>Example Two</h1>
<p> Consumer passes <strong>Header</strong> parameter, default <strong>ChildContent</strong> of derived component is used.</p>
<p style="font-style: italic">code</p>
<code>@ExampleTwo</code>
<p style="font-style: italic">output</p>
<MyDerivedComponent Header="Consumer Header"/>

<hr/>

<h1>Example Three</h1>
<p> Consumer passes both <strong>Header</strong> and <strong>ChildContent</strong> parameters.</p>
<p style="font-style: italic">code</p>
<code>
    <pre>@ExampleThree</pre>
</code>
<p style="font-style: italic">output</p>
<MyDerivedComponent Header="Consumer Header">
    <h4>Child Content - from consumer</h4>
</MyDerivedComponent>


@code {
        private const string ExampleOne = @"<MyDerivedComponent/>";
        private const string ExampleTwo = "<MyDerivedComponent Header=\"Consumer Header\"/>";

        private const string ExampleThree = @"
<MyDerivedComponent Header=""Consumer Header"">
    <h4>Child Content - from consumer</h4> 
</MyDerivedComponent>";

}

namespace BlazorFiddleProject
{
    using Microsoft.AspNetCore.Components.Builder;
    using Microsoft.Extensions.DependencyInjection;
    using Microsoft.AspNetCore.Components;


    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
        }

        public void Configure(IComponentsApplicationBuilder app)
        {
            app.AddComponent<App>("app");
        }
    }

    public class MyDerivedComponent : MyBaseComponent
    {
        protected override void OnParametersSet()
        {
            // coalesce
            if(string.IsNullOrWhiteSpace(Header))
                Header = "Derived Component Header";

            if(ChildContent == null)
                ChildContent = CreateDefaultChildContent();
        }
        
        private static RenderFragment CreateDefaultChildContent()
        {
            return builder =>
            {
                builder.OpenElement(0, "h4");
                builder.AddContent(1, "Derived Component default child content value");
                builder.CloseElement();
            };
        }
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title>BlazorFiddleProject</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	
	<script src="_content/MatBlazor/dist/matBlazor.js"></script>

    <style>
        app { }
    </style>

    <script type="text/javascript">
    </script>
</head>
<body>
<app>Loading...</app>

<script src="_framework/blazor.webassembly.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

BlazorFiddle was updated from Blazor 0.7 to .NET 6.0. Your old source code could not work. You need to upgrade to latest.