jqwidgets-scripts-custom/demos/Angular/grid/popupediting/src/app/app.component.html

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<jqxGrid [theme]="'material'" #myGrid class="grid"
    [width]="getWidth()" [source]="dataAdapter" [pageable]="true"
    [autoheight]="true" [columns]="columns" >
</jqxGrid>

<jqxWindow [theme]="'material'" #myWindow [width]="250" [height]="230" [resizable]="false" [isModal]="false" [autoOpen]="false" [modalOpacity]="'0.01'">
    <div>Edit</div>
    <div style="overflow: hidden;">
        <table>
            <tr>
                <td align="right">First Name:</td>
                <td align="left">

                    <jqxInput [theme]="'material'" #firstname [width]="150" [height]="23"></jqxInput>

                </td>
            </tr>
            <tr>
                <td align="right">Last Name:</td>
                <td align="left">

                    <jqxInput [theme]="'material'" #lastname [width]="150" [height]="23"></jqxInput>

                </td>
            </tr>
            <tr>
                <td align="right">Product:</td>
                <td align="left">

                   <jqxInput [theme]="'material'" #product [width]="150" [height]="23"></jqxInput>

                </td>
            </tr>
            <tr>
                <td align="right">Quantity:</td>
                <td align="left">

                    <jqxNumberInput [theme]="'material'" #quantity
                        [width]="150" [height]="23" [decimalDigits]="0" 
                        [min]="0" [spinButtons]="true" [spinMode]="'simple'">
                    </jqxNumberInput>

                </td>
            </tr>
            <tr>
                <td align="right">Price:</td>
                <td align="left">

                  <jqxNumberInput [theme]="'material'" #price
                      [width]="150" [height]="23" [symbol]="'$'"
                      [min]="0" [spinButtons]="true" [spinMode]="'simple'">
                  </jqxNumberInput>

                </td>
            </tr>
            <tr>
              <td align="right"></td>
              <td style="padding-top: 10px;" align="right">

                  <jqxButton [theme]="'material'" style="margin-right: 5px;" (onClick)="saveBtn()">
                      Save
                  </jqxButton>

                  <jqxButton [theme]="'material'" style="margin-right: 5px;" (onClick)="cancelBtn()">
                      Cancel
                  </jqxButton>

              </td>
            </tr>
        </table>
    </div>
</jqxWindow>