Add public change handler to checkbox

[DDaemonium]

Added OnValueChanged handler, to handle onchange action.
Currently overloading of onchange attribute of MatCheckbox has no results.

[EduVencovsky]

I'm not sure if this is actually needed, also don't think using Action is the correct way of doing this.

Could you please explain why you need / want this? Maybe it's to do something that you can already do, but don't know how yet.

[DDaemonium]

Hi @EduVencovsky , I need to override onchange attribute of MatCheckbox to do additional action when value changed. I tried override onchange, but it didn't call my method. Currently I override onclick attribute as workaround, but my checkbox inside of MatListItem, so, I have double call of method.

<MatList>
                    @foreach (var item in items)
                    {
                        <MatListItem>
                            <MatCheckbox @onclick="@(x=>OnItemSelected(item))" Value="item .IsSelected" Label="@item .Name"></MatCheckbox>
                        </MatListItem>
                    }
</MatList>

[SamProf]

Thank you, @DDaemonium for this contribution.

For events the best way is using EventCallback instead Action https://docs.microsoft.com/en-us/aspnet/core/blazor/event-handling?view=aspnetcore-3.1

I can assume that you need 2-way binding and event of value changed as the same time.
If you need only 2-way binding or change event - there is no problem.

If you need only 2-way binding you can go this way: https://blazorfiddle.com/s/yi2tpksf

<MatH4>Source</MatH4>
<MatList>
    @foreach (var item in items)
    {
        <MatListItem>
            <MatCheckbox @bind-Value="@item.IsSelected" Label="@item.Name"></MatCheckbox>
        </MatListItem>
    }
</MatList>


<MatH4>Result</MatH4>
@foreach (var item in items)
{
    <div>@item.Name - @item.IsSelected</div>
}

@code
{

    ItemClass[] items = Enumerable.Range(1, 10)
        .Select(i => new ItemClass($"Item {i}", i % 2 == 0))
        .ToArray();

    class ItemClass
    {
        public string Name { get; set; }
        public bool IsSelected { get; set; }

        public ItemClass(string name, bool isSelected)
        {
            Name = name;
            IsSelected = isSelected;
        }
    }
}

But if you need event of changing you can not 2-way binding, because 2-way binding need one subscription and your subscription to ValueChange event. But EventCallback supports only one subscription. This will be fixed in next versions of Blazor. dotnet/aspnetcore#14365

You can go this way: https://blazorfiddle.com/s/vofr3vc1

<MatH4>Source</MatH4>
<MatList>
    @foreach (var item in items)
    {
        <MatListItem>
            <MatCheckbox TValue="bool" Value="@item.IsSelected" ValueChanged="@(value=>OnItemSelected(item, value))" Label="@item.Name"></MatCheckbox>
        </MatListItem>
    }
</MatList>


<MatH4>Result</MatH4>
@foreach (var item in items)
{
    <div>@item.Name - @item.IsSelected</div>
}

@code
{
    void OnItemSelected(ItemClass item, bool value)
    {
        item.IsSelected = value;
        // here you can dot something
    }
    

    ItemClass[] items = Enumerable.Range(1, 10)
        .Select(i => new ItemClass($"Item {i}", i % 2 == 0))
        .ToArray();

    class ItemClass
    {
        public string Name { get; set; }
        public bool IsSelected { get; set; }

        public ItemClass(string name, bool isSelected)
        {
            Name = name;
            IsSelected = isSelected;
        }
    }
}

Anyway I think new event not needed. What you think?

[Christian-Oleson]

@DDaemonium ,

Can you see the above comment?

[DDaemonium]

@Christian-Oleson , Sure, will close this PR. Thanks.