Use BlazoredTypeahead to create a reusable razor component

[oliveriod]

I have created a razor component using Blazored Typeahead and it works fine but I need the selected item on the parent and so far I'm unable to get it.

This is the blazor component (named MiRazorCliente.razor):

   <BlazoredTypeahead SearchMethod="GetLosClientesLocal"
   				   TValue="ClienteDto"
   				   TItem="ClienteDto"
   				   Value="ElCliente"
   				   ValueChanged="@( (ClienteDto s) => SelectedClienteChanged(s) )"
   				   ValueExpression="@( () => ElCliente )"
   				   placeholder="Buscar por nombre...">
   	<SelectedTemplate Context="unCliente">
   		@unCliente.NombreCompleto
   	</SelectedTemplate>
   	<ResultTemplate Context="unCliente">
   		@unCliente.NombreCompleto
   	</ResultTemplate>
   </BlazoredTypeahead>

   @if (ElCliente != null)
   {
   	<p>you have selected: @ElCliente.ClienteId @ElCliente.NombreCompleto</p>}

@code {
	[Inject]
	public IClienteDataService ClienteDataService { get; set; }

	public ClienteDto ElCliente;
	private List<ClienteDto> LosClientes = new List<ClienteDto>();

	private async Task<IEnumerable<ClienteDto>> GetLosClientesLocal(string searchText)
	{
		if (string.IsNullOrEmpty(searchText))
		{
			IEnumerable<ClienteDto> vacio = new List<ClienteDto>();
			return vacio;
		}
		return (await ClienteDataService.TraerParaTypeAheadAsync(searchText));
	}

	private void SelectedClienteChanged(ClienteDto result)
	{
		ElCliente = result;
	}
}

On the parent component this code shows the component and you can select a client but the parent does not get the selected value.

@page "/pruebascomponentes"

<h3>Prueba búsqueda con componentes razor</h3>

<div>
	<MiRazorCliente/>
</div>

@if (HopeToHaveTheClient != null)
{
	<p>You have selected: @HopeToHaveTheClient.ClienteId @HopeToHaveTheClient.NombreCompleto</p>}


@code{ private ClienteDto HopeToHaveTheClient { get; set; } }

If we add a bind like this, then the page hangs:

@page "/pruebascomponentes"

<h3>Prueba búsqueda con componentes razor</h3>

<div>
	<MiRazorCliente @bind-Value="HopeToHaveTheClient"/>
</div>

@if (HopeToHaveTheClient != null)
{
	<p>You have selected: @HopeToHaveTheClient.ClienteId @HopeToHaveTheClient.NombreCompleto</p>}


@code{ private ClienteDto HopeToHaveTheClient { get; set; } }

Any help will be greatly appreciated.

Thanks in advance!

Oliverio

[chrissainty]

I'd suggest you have a look through the docs at EventCallback. You need to setup proper communication between the parent and child.