Passing a component to be rendered in a parent component

Question

User1621941096 posted

Hi,

I have a layout with a side nav a header and a main body. The main body can have one of x components rendered in it. I'd like the header to be contextual, so I'd like the "child" component in the body to pass a component to the layout to be rendered in the header.

I'm not quite sure if I can achieve this, and if so how? I could have the layout subscribe to an event on the child component but I'm not sure how to pass a component to a method and have it render, is that possible?

I'm using Blazor client side if that helps.

Thanks,

Nick.

Answer 1

User1621941096 posted

I think I might be able to pass a RenderFragment back up, but I'm not quite sure how to get it to the layout component from the @body component..

Answer 2

User-821857111 posted

I'd like the header to be contextual

Can you describe in a bit more detail what you mean by this? Is the context based on say routing? Or something specific to a component rendered in @body?

Answer 3

User1621941096 posted

Hi Mike,

Thanks for taking the time to reply. It's not impossible I'm over complicating this, but I think the question is still interesting.

The header is contextual to the component. I have a layout that has a full height nav bar on the left. And then to the right of that I have a header and underneath the body (@Body). The links in the navbar route to different components in the @Body and each one will have "actions" (buttons/links etc) that need to be on the header. It seemed ideal for the UI layout to continue to be in MainLayout.razor, but I want to "inject" the header from the child (i.e. the component rendered in the @Body). I'm not sure how to pass the render fragment back to the layout for rendering in the header space.

It's basically the opposite of @ChildContent which allows a parent component to pass a RenderFragment to a child component. I want to do the opposite from the @Body component to the layout.

I could just remove the header from the layout and give each component a header but this didn't seem quite right. Especially as I need to keep the header and side nav from scrolling and just have the body component scroll (which I have working).

Thanks,

Nick

Answer 4

User-821857111 posted

Some of the discussion in this issue might be relevant: https://github.com/aspnet/Blazor/issues/857