Blazor - how to apply attribute to parent element from a component

Question

User-963208184 posted

I have the following cshtml page:

@inherits BlazorLayoutComponent

<NavMenuToggleComponent></NavMenuToggleComponent>

<div class="main">
<div class="top-row px-4">
    <a href="http://blazor.net" target="_blank" class="ml-md-auto"><span class="col-md-1">About</span></a>
    <NavLink class="nav-link pull-right col-md-2" id="logout" href="logout">
        <span class="fas fa-sign-out-alt" aria-hidden="true"></span><span class="col-md-1 pull-right">Logout</span>
    </NavLink>
</div>

<div class="content px-4">
    @Body
</div>

as you can see I have a component called NavMenuToggleComponent who's code is:

@inherits Blazor.Web.Functions.MenuFunctions

<div class="pl-4  navbar navbar-dark">
<button class="navbar-toggler navbar-brand main-button" title="MENU" onclick=@ToggleNavMenu>
    MENU
</button>
</div>

<div class="sidebar @(CollapseNavMenu ? "collapse" : null)">
    <NavMenu />
</div>

I have a function on the button click event and this is declared in the MenuFunctions Class. This, function simply has :

public class MenuFunctions : BlazorComponent
{
   public  void ToggleNavMenu()
   {
       CollapseNavMenu = !CollapseNavMenu;
   }…..

Now to keep it simple from this function I want to be able to add an attribute to the element on the parent that has the class content on it. so as an example I might want this to end up as <div class="content px-4" style="color:red"> so How would I attach the style attribute? The one caveat that also makes this more difficult is that I am not allowed to embed any `@functions` In my .cshtml page, hence my MenuFunctions class

Answer 1

User-1764593085 posted

HI billcrawley,

Components can offer callbacks that parent components can use to react on events raised by their child components .You could use event-binding to make it.

MenuFunctions.cs:

public class MenuFunctions : BlazorComponent
    {

        public string Color { get; set; } = "red";

        [Parameter]
        private Action<string> OnSomeEvent { get; set; }

        public void OnClick()
        {
            OnSomeEvent?.Invoke(this.Color);
        }

        public bool CollapseNavMenu { get; set; } = true;
        public void ToggleNavMenu()
        {
            CollapseNavMenu = !CollapseNavMenu;
        }       
    }

In NavMenuToggleComponent.cshtml, add below code:

<button onclick=@OnClick>Click me (child component)</button>

Parent cshtml page:

@inherits BlazorLayoutComponent

<NavMenuToggleComponent OnSomeEvent=@((c)=> { this.Color = c; StateHasChanged(); })></NavMenuToggleComponent>

<div class="content px-4" style="@("color:"+@Color)">
   Text
</div>

Click the button and "Text" will become red.

Xing