title: Blazor TwoWay Binding on custom Component
body: <p>I'm creating a blazor server side app and have problems to bind a value between two custom components.</p>
  
  <p>I've looked through different example of how the bind or @bind is supposed to work but I cannot figure out what up to date information on this matter is.</p>
  
  <p>Given a model class User:</p>
  
  <pre><code>public class User
      {
          [Mapping(ColumnName = "short_id")]
          public string ShortId { get; set; }
  
          public User()
          {
  
          }
      }
  </code></pre>
  
  <p>I want to build a form which displays all properties of this user and has them in an input so it can be edited and in the end saved to a database.</p>
  
  <p>My Form (parent component) looks like this:</p>
  
  <pre><code>&lt;div class="edit-user-form"&gt;
      &lt;AnimatedUserInput TbText="@User.ShortId" Placeholder="MHTEE Id"/&gt;
      &lt;button class="btn btn-secondary" @onclick="Hide" style="{display:inline-block;}"&gt;Back&lt;/button&gt;
      &lt;button class="btn btn-primary" @onclick="SaveUser" style="{display:inline-block;}"&gt;Save&lt;/button&gt;
  &lt;/div&gt;
  @code {
      [Parameter] public vUser User { get; set; }
  
      [Parameter] public Action Hide { get; set; }
  
      bool _error = false;
  
      void SaveUser()
      {
          ValidateUserData();
      }
  
      void ValidateUserData()
      {
          _error = string.IsNullOrWhiteSpace(User.ShortId);
      }
  }
  </code></pre>
  
  <p>Where <code>AnimatedUserInput</code> is a custom component that looks like this:</p>
  
  <pre><code>&lt;div class="edit-area @FocusClass @WiggleClass"&gt;
      &lt;input type="text" @bind="@TbText" /&gt;
      &lt;span data-placeholder="@Placeholder"&gt;&lt;/span&gt;
  &lt;/div&gt;
  @code {
      [Parameter]
      public string TbText { get; set; }
  
      [Parameter]
      public string Placeholder { get; set; }
  }
  </code></pre>
  
  <p>Now in the Input textbox I correctly see the <code>ShortId</code> of the <code>User</code> object in my parent component. </p>
  
  <p>However if I change the text in the input and click on the <code>Save</code> button which triggers the <code>ValidateUserData</code> method and allows me to look at the current <code>User</code> object I see that no changes have been done in the actual <code>User.ShortId</code> property but only on the input.</p>
  
  <p>Is there any way to bind it so that changes in the input will automatically be applied to the binded property?</p>
  
  <p>I have several of these properies which need to be shown in the form which is why I dont want to hook a custom <code>OnChanged</code> Event for each of those properties.</p>