a simple countdown timer with dotnet Blazor

Countdown.razor

<div class = "clock">
    <h1>@Time</h1>
</div>

Countdown.razor.cs

using System.Timers;
using Microsoft.AspNetCore.Components;

public partial class Countdown : ComponentBase, IDisposable
{
    private System.Timers.Timer _timer = null!;
    private int _secondsToRun = 0;

    protected string Time { get; set; } = "00:00";

    [Parameter]
    public EventCallback TimerOut { get; set; }

    public void Start(int secondsToRun)
    {
        _secondsToRun = secondsToRun;

        if (_secondsToRun > 0)
        {
            Time = TimeSpan.FromSeconds(_secondsToRun).ToString(@"mm\:ss");
            StateHasChanged();
            _timer.Start();
        }
    }

    public void Stop()
    {
        _timer.Stop();
    }

    protected override void OnInitialized()
    {
        _timer = new System.Timers.Timer(1000);
        _timer.Elapsed += OnTimedEvent;
        _timer.AutoReset = true;
    }

    private async void OnTimedEvent(object? sender, ElapsedEventArgs e)
    {
        _secondsToRun--;

        await InvokeAsync(() =>
        {
            Time = TimeSpan.FromSeconds(_secondsToRun).ToString(@"mm\:ss");
            StateHasChanged();
        });
        
        if (_secondsToRun <= 0)
        {
            _timer.Stop();
            await TimerOut.InvokeAsync();
        }
    }

    public void Dispose()
    {
        _timer.Dispose();
    }
}

Countdown.razor.css

.clock {
    color: var(--color-tone-1);
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
}

I have a question! What does the public EventCallback TimerOut { get; set; } here?

I have a question! What does the public EventCallback TimerOut { get; set; } here?

it allows you to do some actions on the timer completion
when used like this

<Countdown @ref="timer" TimerOut="TimerOutCallback"/>
...
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            timer.Start(10);
        }
    }

    protected Shared.Countdown timer;

    private void TimerOutCallback()
    {
        ...
    }

This is really neat! Thanks for sharing it.

This looks like a great solution. I am newbie with Blazor. Created tree but getting these errors - stumped maybe you can point me in the right direction to solve?

Severity Code Description Project Path File Line Suppression State
Error (active) CS0103 The name 'Time' does not exist in the current context RASPublicWeb C:\VisualStudio2022\Projects\RASPublicWEB\RASPublicWeb\Components\Pages C:\VisualStudio2022\Projects\RASPublicWEB\RASPublicWeb\Components\Pages\Countdown.razor 2

Error (active) RZ3008 Tag helpers cannot target tag name '.Countdown' because it contains a '<' character. RASPublicWeb C:\VisualStudio2022\Projects\RASPublicWEB\RASPublicWeb C:\VisualStudio2022\Projects\RASPublicWEB\RASPublicWeb\CSC 1

Error (active) RZ3008 Tag helpers cannot target tag name '.Countdown' because it contains a ' ' character. RASPublicWeb C:\VisualStudio2022\Projects\RASPublicWEB\RASPublicWeb C:\VisualStudio2022\Projects\RASPublicWEB\RASPublicWeb\CSC 1

Error (active) RZ3008 Tag helpers cannot target tag name '.Countdown' because it contains a '>' character. RASPublicWeb C:\VisualStudio2022\Projects\RASPublicWEB\RASPublicWeb C:\VisualStudio2022\Projects\RASPublicWEB\RASPublicWeb\CSC 1

Cleaned project and solution and closed and re-opened to no avail.

I got Error when call back fire:

System.InvalidOperationException: 'The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to the Dispatcher when triggering rendering or component state.'

I resolved after i but this code :
await InvokeAsync(() =>
{

TimerOut.InvokeAsync();

});