jqwidgets-scripts-custom/demos/Angular/passwordinput/defaultfunctionality/src/app/app.component.html

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

<jqxExpander [theme]="'material'" #createAccount
             [showArrow]="false"
             [toggleMode]="'none'"
             [width]="350">
    <div>
        Create a new account
    </div>
    <div style="font-family: Verdana; font-size: 13px;">
        <jqxValidator #validatorReference (onValidationSuccess)="validationSuccess($event)" [rules]="rules" [hintType]="'label'">
            <form id="form" style="overflow: hidden; margin: 10px;" action="./">
                <table>
                    <tr>
                        <td colspan="2">
                            First Name
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <jqxInput [theme]="'material'" #firstName class="firstName" [width]="300" [height]="21"></jqxInput>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            Last Name
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <jqxInput [theme]="'material'" #lastName class="lastName" [width]="300" [height]="21"></jqxInput>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            Choose your username
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <jqxInput [theme]="'material'" #userName class="userName" [width]="300" [height]="21"></jqxInput>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            Create a password
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <jqxPasswordInput [theme]="'material'" #password class="password" [width]="300" [height]="21"></jqxPasswordInput>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            Confirm your password
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <jqxPasswordInput [theme]="'material'" #passwordConfirm class="passwordConfirm" [width]="300" [height]="21"></jqxPasswordInput>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            Birthday
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <jqxDateTimeInput [theme]="'material'" #birthday class="birthday"
                                              [width]="300"
                                              [height]="21">
                            </jqxDateTimeInput>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            Gender
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <jqxDropDownList [theme]="'material'" #gender class="gender"
                                             [source]="genders"
                                             [selectedIndex]="-1"
                                             [placeHolder]="'I am...'"
                                             [autoDropDownHeight]="true"
                                             [width]="300"
                                             [height]="21">
                            </jqxDropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <jqxButton [theme]="'material'" [width]="150" (onClick)="buttonClicked()">Create account</jqxButton>
                        </td>
                    </tr>
                </table>
            </form>
        </jqxValidator>
    </div>
</jqxExpander>