You define Contact in both the Modal and Modal-Test pages. You pass a Modal.Contact object in the callback, while HandleSave expects a Modal_Test.Contact. Hence the error. Define Contact once outside the two components.

A comment: There’s probably no reason for @page "/modal", as it’s unlikely to be a route.

The actually reason for the error is you couldn’t convert the modal-test.razor.Contact to the modal.razor.Contact. Since you are using two different class ,so you couldn’t pass the Contact to the modal.razor.

To solve this issue, you need create a split class Contact inside the project. Then both modal-test.razor.Contact and modal.razor.Contact reference this contact, then this will work.

My test codes:

Contact class:

 public class Contact
{
    public int Id { get; set; }
    public string Name { get; set; }
}

modal-test.razor

@page "/modal-test"

<Modal OnSave="HandleSave"  ></Modal>


<p>Selected contact: @SelectedContact?.Name</p>

@code {
    private Contact SelectedContact;


    private void HandleSave(Contact contact)
    {
        SelectedContact = contact;
    }
}

model.raozr:

@page "/modal"

<div class="modal @ModalClass" tabindex="-1" role="dialog" style="display:@ModalDisplay" aria-labelledby="modalTitle" aria-describedby="modalBody" aria-hidden="@(!ShowBackdrop)">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Select a Contact</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body" id="modalBody">
                <ul>
                    @foreach (var contact in Contacts)
                    {
                        <li @onclick="() => SelectContact(contact)">@contact.Name</li>
                    }
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="Close">Close</button>
            </div>
        </div>
    </div>
</div>

@if (ShowBackdrop)
{
    <div class="modal-backdrop fade show"></div>
}

@code {
    public string ModalDisplay { get; set; } = "none;";
    public string ModalClass { get; set; } = "";
    public bool ShowBackdrop { get; set; } = false;

    [Parameter]
    public EventCallback<Contact> OnSave { get; set; }
   
    private List<Contact> Contacts = new List<Contact>
    {
        new Contact { Id = 1, Name = "John Doe" },
        new Contact { Id = 2, Name = "Jane Smith" },
        new Contact { Id = 3, Name = "Bob Johnson" }
    };

    public void Open()
    {
        ModalDisplay = "block;";
        ModalClass = "show";
        ShowBackdrop = true;
        StateHasChanged();
    }

    public void Close()
    {
        ModalDisplay = "none";
        ModalClass = "";
        ShowBackdrop = false;
        StateHasChanged();
    }

    private async Task SelectContact(Contact contact)
    {
        if (OnSave.HasDelegate)
        {
            await OnSave.InvokeAsync(contact);
        }
        Close();
    }

  
}