Event Callback issue parent/child component "does not have a property matching the name 'OnClickCallback'"

Question

The issue

So I have an issue in Blazor where I am trying to invoke a method in my MainLayout parent component from a child component (NavMenu). All I am trying to achieve is to open a dialog in the MainLayout parent component after being being told to from a button in the NavMenu child component.

I am assuming this is allowed as the parent/child concept is still the same for NavMenu and MainLayout.

What I have tried

I have followed the Microsoft Docs Here and I cannot seem to get this working at all. I am hoping I am doing something stupid and a fresh set of eyes may spot the issue.

The current outcome

Basically, everything builds fine but when I go to run the application, the following error is shown in the web console:

System.InvalidOperationException: Object of type 'MyProject.Shared.Components.NavMenu' does not have a property matching the name 'OnClickCallback'.

The code

Parent Component (MainLayout)

<NavMenu OnClickCallback="@Foo()">
   <label>Text value: @text</label>
</NavMenu>

@code {
    private string text { get; set; }

    async Task Foo()
    {
        text = "IT WORKS";
        // In reality I will actually open a dialog here on the screen
    }
}

Child component (NavMenu)

<MatNavItem AllowSelection="false" @onclick="OnClickCallback">
    <MatIcon>settings</MatIcon><span class="miniHover"> Test App Settings</span>
</MatNavItem>

@code {

    [Parameter]
    public EventCallback OnClickCallback { get; set; }
    // I have also tried the "type" event callbacks such as public EventCallback<bool> OnClickCallback { get; set; } - but still get the same result
}

---

Solution:

After some helpful answers this issue was due to me having two NavMenu components, one which I didn't think the MainLayout could see, however this was not the case, so I have eliminated the ambiguity between the two.

Some answers also showed that my parent component OnClickCallback="@Foo()" should be OnClickCallback="Foo" which actually solved an issue I encountered later.

My child component now also uses:

<MatNavItem AllowSelection="false" @onclick="@(() => OnClickCallback.InvokeAsync(true))">

To invoke the callback in the parent component, which in turn now opens my dialog as expected.

Answer 1

The error is quite literal:

... .NavMenu' does not have a property matching the name 'OnClickCallback'.

So the error does not match your code. The NavMenu child component does have that parameter property.

You should use <NavMenu OnClickCallback="Foo">, no @ or () but that cannot explain this error.

Best guess is that you have 2 components called <NavMenu> and you are looking at the wrong one.