How to navigate between modal contents / render different components in Custom Modal without Closing?

[harrish-golden7]

Good day everyone. As the title says, is it possible to show different components without closing and reopening the modal?

I have a LoginFormComponent that has a Register Now button, and a RegisterFormComponent that has a Login Now button. I created a custom modal component called DynamicModal very much like Blazored's CustomBootstrapModal. I have a Login Button in my Home screen, this is the code:

void LoginClick()
{
    var content = new RenderFragment(builder =>
    {
        builder.OpenComponent<LoginFormComponent>(0);
        builder.CloseComponent();
    });
    var modalParams = new ModalParameters();
    modalParams.Add(nameof(DynamicModal.ChildContent), content);
    Modal.Show<DynamicModal>(modalParams);
}

The 'Register Now' button in the LoginFormComponent has the same code above (just swapped LoginFormComponent with RegisterFormComponent). The effect is one modal is stacked on top of the other, which when I click close shows the modal underneath the closed modal.

Another method that I tried was await BlazoredModal.CloseAsync() followed by Modal.Show<Component> but it doesn't look seamless because the modal closes for a few milliseconds before displaying the next form.

So I want to only update the ChildContent of the modal if possible. Will appreciate anyone who can point me in the right direction. Thanks