(Blazor) I'm having trouble accessing a variable inside a parent component.

I'm trying to access a simple bool in a parent component that shows when my side bar has been collapsed. I'm using the Blazor Fluent UI components by the way.

Okay so I've got this FluentNavMenu:

<FluentNavMenu Id="main-menu" Collapsible="true" Width="250" Title="Navigation menu" @bind-Expanded="SideBarExpanded">
...
</FluentNavMenu>

@code {

    [Parameter]
    public bool SideBarExpanded {get; set;}= true;
}

<FluentNavMenu Id="main-menu" Collapsible="true" Width="250" Title="Navigation menu" @bind-Expanded="SideBarExpanded">
...
</FluentNavMenu>

@code {

    [Parameter]
    public bool SideBarExpanded {get; set;}= true;
}

Then I've got a parent component:

<FluentStack>
...
<NavMenu  (I've tried different bindings here but nothing has worked)/>
...
</FluentStack>

<FluentStack>
...
<NavMenu  (I've tried different bindings here but nothing has worked)/>
...
</FluentStack>

That binding sets the

SideBarExpanded

SideBarExpanded

every time I open or close it. I need to access it in a parent component to hide something else. What's the best way to detect that this variable has changed in the parent?
There is also a component attribute I can add to the

FluentNavMenu

FluentNavMenu

called

ExpandedChanged

ExpandedChanged

which takes in an

EventCallback

EventCallback

, but I have no idea how to use it in the context of this particular component.

I've watched this video around 10 times and I still can't wrap my head around it as this particular scenario seems different.

Thanks!

(Blazor) I'm having trouble accessing a variable inside a parent component.

I'm trying to access a simple bool in a parent component that shows when my side bar has been collapsed. I'm using the Blazor Fluent UI components by the way.

Okay so I've got this FluentNavMenu:

<FluentNavMenu Id="main-menu" Collapsible="true" Width="250" Title="Navigation menu" @bind-Expanded="SideBarExpanded">
...
</FluentNavMenu>

@code {

    [Parameter]
    public bool SideBarExpanded {get; set;}= true;
}

<FluentNavMenu Id="main-menu" Collapsible="true" Width="250" Title="Navigation menu" @bind-Expanded="SideBarExpanded">
...
</FluentNavMenu>

@code {

    [Parameter]
    public bool SideBarExpanded {get; set;}= true;
}

Then I've got a parent component:

<FluentStack>
...
<NavMenu  (I've tried different bindings here but nothing has worked)/>
...
</FluentStack>

<FluentStack>
...
<NavMenu  (I've tried different bindings here but nothing has worked)/>
...
</FluentStack>

That binding sets the

SideBarExpanded

SideBarExpanded

FluentNavMenu

FluentNavMenu

called

ExpandedChanged

ExpandedChanged

which takes in an

EventCallback

EventCallback

(Blazor) I'm having trouble accessing a variable inside a parent component.

Similar Threads

(Blazor) I'm having trouble accessing a variable inside a parent component.

Similar Threads

Similar Threads

Similar Threads