blazor pages ccompnent with variable code example

Example 1: how to pass property between blazor components

@inject Services.AppData AppData
<div style="width:300px; height:100px; background-color:@AppData.Color">
    <h3>Display Component</h3>
    <p>You entered the number @AppData.Number.</p>
</div>

@code {
    protected override void OnInitialized()
    {
        AppData.OnChange += StateHasChanged;
    }
}

Example 2: how to pass property between blazor components

@inject Services.AppData AppData
<h3>Input Component</h3>
<input type="number" @bind="AppData.Number" />
<br /><br />
<select @bind="AppData.Color">
    <option value="#add8e6">Light Blue</option>
    <option value="#90ee90">Light Green</option>
    <option value="#d3d3d3">Light Grey</option>
    <option value="#ffb6c1">Light Pink</option>
    <option value="#fff">White</option>
</select>
<br /><br />