Q:

how to pass property between blazor components

@page "/page2"
@inject Services.AppData AppData
0
@page "/"
@using AppDataService.Components
@inject Services.AppData AppData

<h1>Blazor Singleton Test</h1>
<InputComponent />
<DisplayComponent />
<a href="/page2">Go to Page 2</a>

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

    private void MyEventHandler()
    {
        Console.WriteLine("AppData changed.");
    }
}
0
@page "/"
@inject Services.AppData AppData

<h1>First Page</h1>
<input type="number" @bind="AppData.Age" />
<br>
<a href="/page2">Go to Page 2</a>
0
@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;
    }
}
0
@page "/"
@inject Services.AppData AppData
0
@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 />
0
services.AddScoped<Services.AppData>();
0
using System;
namespace AppDataService.Services
{
    public class AppData
    {
        private int _number;
        public int Number
        {
            get
            {
                return _number;
            }
            set
            {
                _number = value;
                NotifyDataChanged();
            }
        }

        private string _color;
        public string Color
        {
            get
            {
                return _color;
            }
            set
            {
                _color = value;
                NotifyDataChanged();
            }
        }

        public event Action OnChange;

        private void NotifyDataChanged() => OnChange?.Invoke();
    }
}
0
public void ConfigureServices(IServiceCollection services)
{
    services.AddSingleton<Services.AppData>();
}
0
@page "/page2"
@inject Services.AppData AppData

<h1>Second Page</h1>
<p>You entered the number @AppData.Age.</p>
0

New to Communities?

Join the community