blazor MatTab

@page "/Events"
@inject NavigationManager NavigationManager

<MatButton OnClick="@ChangeTab">Change Tab</MatButton>
<div>
    Active tab index: @tabIndex
</div>
<div>
    Onclick index: @tabClickIndex
</div>
<MatTabGroup @bind-ActiveIndex="@tabIndex" @onclick="ClickHandler">

    <MatTab Label="First">
        First Content
    </MatTab>
    <MatTab Label="Second">
        Second Content
    </MatTab>
    <MatTab Label="Third">
        Third Content
    </MatTab>
    <MatTab Label="Fourth">
        Fourth Content
    </MatTab>
    <MatTab Label="Fourth1">
        Fourth Content
    </MatTab>
    <MatTab Label="Fourth2">
        Fourth Content
    </MatTab>
    <MatTab Label="Fourth3">
        Fourth Content
    </MatTab>
    <MatTab Label="Fourth4">
        Fourth Content
    </MatTab>
    <MatTab Label="Fourth5">
        Fourth Content
    </MatTab>
    <MatTab Label="Fourth6">
        Fourth Content
    </MatTab>
    <MatTab Label="Fourth7">
        Fourth Content
    </MatTab>

</MatTabGroup>

@code {
    public int tabIndex = 0;
    public int tabClickIndex = 0;
    // to redirect the user, do something like this:
    //uriHelper.NavigateTo("/yourPage"); // to do a dynamic refresh with injected UriHelper
 
    //navMan.NavigateTo("/yourPage", true); // to also force page refresh instead of a dynamic load with injected NavigationManager
    void ClickHandler()
    {
        if (!tabIndex.Equals(2))
        {
            NavigationManager.NavigateTo("/Counter");
        }

        tabClickIndex = tabIndex;
    }

    void ChangeTab(MouseEventArgs e)
    {
        tabIndex = tabIndex < 3 ? tabIndex + 1 : 0;
    }
}