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

Question

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

https://stackoverflow.com/questions/56604886/blazor-display-wait-or-spinner-on-api-call — dani herrera, Apr 06 '20 at 08:10

score 1 · Accepted Answer · edited Apr 06 '20 at 08:54

1

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();
        }
    }

edited Apr 06 '20 at 08:54

Quango

12,338
6
48
83

answered Apr 06 '20 at 06:16

tbdrz

1,811
2
12
30

I would also advise that you consider passing such references as a `Parameter` to the child component - if the child needs to mutate the state of their parent even some two-way binding or at least an event might be in order. Personally, I prefer raising events from the child components so their parents can decide what to do with that (like, toggle a loading sign, or fetch other data). – rdmptn Apr 06 '20 at 11:42
StateHasChanged(); saved my life. Thank you. – DrXSsive Apr 06 '20 at 11:52

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

1 Answers1