CODEWITHSUNDEEP
blazor.net-core-3.1
DrXSsive
DrXSsive

Reputation: 175

Blazor Server Side - Value changed in Child function is not updating UI

So what I am doing here is, I have a progress bar in my child component(RMSBaseComponent.razor) which is surrounded by a condition variable "IsLoading"

<div style="padding:20px">

@* Page Title *@
<h3>@PageTitle</h3>
<MatDivider></MatDivider>

@* Loader *@
@if (IsLoading)
{
    <MatProgressBar Indeterminate="true"></MatProgressBar>
}
</div>

I am making this Child in Parent(AddNewCity.razor) as

<RMSBaseComponent PageTitle="Add New City" @ref="BaseComponent">

</RMSBaseComponent>

Here I am getting the reference of child in "BaseComponent" variable but when I change the value of "IsLoading" from parent component class (AddNewCity.cs) it does not update the UI and not showing "MatProgressBar" UI. I am changing value as below

public partial class AddNewCity
{
    private RMSBaseComponent BaseComponent { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);

        Thread.Sleep(3000);
        BaseComponent.IsLoading = true;
    }
}

Any help will be appriciated.

Thank you

Upvotes: 1

Views: 760

Answers (1)

tbdrz
tbdrz

Reputation: 2190

You should call StateHasChanged() after Thread.Sleep()

public partial class AddNewCity
    {
        private RMSBaseComponent BaseComponent { get; set; }

        protected override void OnAfterRender(bool firstRender)
        {
            base.OnAfterRender(firstRender);

            Thread.Sleep(3000);
            BaseComponent.IsLoading = true;
            StateHasChanged();
        }
    }

Upvotes: 1

Related Questions