'Integrate Angular Elements with ASPX page

I'm trying to integrate Angular Element component to ASPX page. I'm able to render it, but I can't set/get value from html hidden input (name="testData" in snippet - it's injected by Angular Element) in code behind.

This field is updated dynamically by logic in Angular.

What should I do in code behind to set value on PageLoad and get it on SaveAction?

I tried to access it by:

Request.Form["testData"];

but it returns null.

Aspx page:

<asp:Content runat="server"
    ContentPlaceHolderID="head">
    <link type="text/css" rel="stylesheet" href="http://localhost:81/angular-elements-selector/styles.css" />
    <script src="http://localhost:81/angular-elements-selector/runtime.js" type="module"></script>
    <script src="http://localhost:81/angular-elements-selector/polyfills.js" type="module"></script>
    <script src="http://localhost:81/angular-elements-selector/main.js" type="module"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com">

<asp:Content runat="server"
    ContentPlaceHolderID="ContentPlaceHolder2">
    <h1>
        <asp:Literal runat="server"
            ID="testCampaign" />
    </h1>
    <angular-element-root></angular-element-root>

</asp:Content>

HTML injected by Angular element in rendered DOM:

   <angular-element-root ng-version="13.1.1">
      <test-selector>
        <form>
          <!--buttons-->
          <input type="hidden" name="testData" value="[{"id":1, "test":"text"}]">
        </form>
      </test-selector>
    </angular-element-root>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source