I am working on a Blazor Webassembly application on .net 6 and has a structure of page as follows.
There is a MainLayout.razor page where is a header bar which renders few small razor components using “DyamicComponent”
and in the @Body part the actual page (e.g. abc.razor) loads.

<div class="top-row px-4"
    @foreach (var item in BaseParameters)
    {
        if (HasParametersProperty(item))
        {
            <DynamicComponent Type="@item" Parameters="parameters" />
        }
        else
        {
            <DynamicComponent Type="@item" />
        }
    }

</div>
<div id="mainContent" class="content px-4" style="padding:0;">
            @Body
        </div>
    
    @code
    {
        public List<Type> BaseParameters { get; set; } = new List<Type> { typeof(MyComponent1), typeof(MyComponent2), /* other component types */ };
    
        Dictionary<string, object>? parameters = new() { { "OnInputCallBack", EventCallback.Factory.Create<EventCallbackArgs>(this, GetChangedValue) } };
    
        private bool HasParametersProperty(Type componentType)
        {
            return componentType.GetProperty("Parameters") != null;
        }
    }

Here I have written a service where the actual page provides list of components to be housed in the header part of the MainLayout.

My requirement is I want to access the components rendered in Header bar whenever required and in the event of user changes the values in the header components the page should be able know that.

I was able to implement that using a common event callback in the header components and subscribing it in the actual page but its very messy and I could not the values first time the components in header are rendered.