How to Create our own Custom Component in MudBlazor

Question

My Own Custom component with MudNavLink and MudCheckBox but it didn't show in Implemented Razor Page output. I didn't know issue i was using own component for first time.

CustomLinkWithCheckbox.razor

    <div style="display: flex; align-items: center;">
    <MudNavLink Href="@Href" Class="@Class" Icon="@Icon">
        @LinkText
         <div class="checkbox-link">
            <MudCheckBox @bind-Checked="IsChecked" />
        </div>
    </MudNavLink>
    </div>

    @code {
    [Parameter] public string Href { get; set; }
    [Parameter] public string LinkText { get; set; }
    [Parameter] public bool IsChecked { get; set; }
    [Parameter] public string Text { get; set; }
    [Parameter] public string Class { get; set; }
    
    [Parameter] public string Icon { get; set; }
}

ImplementedPage.razor

<CustomLinkWithCheckbox Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard" LinkText="My Dashboard" @bind-IsChecked="@isdashboardChecked" />
@code {
 private bool isdashboardChecked { get; set; }
}

I was trying to create MudNavLink and MudCheckBox are two components as one(own custom Component)

    <div class="d-flex align-items-center custom-nav-link">
    <MudNavLink Href="/dashboard" IconColor="Color.Secondary" Icon="@Icons.Material.Filled.Dashboard">My Dashboard </MudNavLink>
    <MudCheckBox @bind-Checked="@isdashboardChecked" class="mud-checkbox" Color="Color.Primary" CheckedIcon="@Icons.Material.Filled.Star" UncheckedIcon="@Icons.Material.Filled.StarOutline" Size="Size.Small"></MudCheckBox>
    </div>

that is my own custom component

    <div style="display: flex; align-items: center;">
    <MudNavLink Href="@Href" Class="@Class" Icon="@Icon">@LinkText
         <div class="checkbox-link">
           <MudCheckBox @bind-Checked="IsChecked" />
        </div>
    </MudNavLink>
    </div>

But i didn't reflect in my Implemented Razor page.

Answer 1

It's just that. You don't need anything else. But in your case the custom component has an error and is therefore not being rendered.

Instead of

<CustomLinkWithCheckbox ... @bind-IsChecked="@isdashboardChecked" />

you should use

<CustomLinkWithCheckbox ... @IsChecked="@isdashboardChecked" />

Check out this Snippet

With @bind-Value you are creating an EventCallback ValueChanged. For more info: ASP.NET Core Blazor data binding