How I can Load another Razor Component into a Razor Component by a Button-click?

Question

I just want to load a razor component into another razor component when user click search button then I want to show search razor component (page) into a hidden div when the user click hide button then it will be hidden. like inline popup.

Answer 1

Like this:

Main Component:

@page "/test"


<button @onclick="(() => ShowComponent = true)">Show</button>
<button @onclick="(() => ShowComponent = false)">Hide</button>
@if (ShowComponent)
{
    <ShowHideComponent></ShowHideComponent>
}


@code {
    bool ShowComponent { get; set; } = false;
}

ShowHideComponent.razor:

<div>Show Or Hide This</div>