<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
  <div style='margin-top: 10px;'>
    Default
  </div>
  <div style='margin-top: 3px;'>
    <jqxNumberInput #numericInput
                    [spinButtons]="true"
                    [width]="250"
                    [height]="25">
    </jqxNumberInput>
  </div>
  <div style='margin-top: 10px;'>
    Primary
  </div>
  <div style='margin-top: 3px;'>
    <jqxNumberInput #numericInput2
                    [template]="'primary'"
                    [spinButtons]="true"
                    [width]="250"
                    [height]="25">
    </jqxNumberInput>
  </div>
  <div style='margin-top: 10px;'>
    Success
  </div>
  <div style='margin-top: 3px;'>
    <jqxNumberInput #numericInput3
                    [template]="'success'"
                    [spinButtons]="true"
                    [width]="250"
                    [height]="25">
    </jqxNumberInput>
  </div>
  <div style='margin-top: 10px;'>
    Info
  </div>
  <div style='margin-top: 3px;'>
    <jqxNumberInput #numericInput4
                    [template]="'info'"
                    [spinButtons]="true"
                    [width]="250"
                    [height]="25">
    </jqxNumberInput>
  </div>
  <div style='margin-top: 10px;'>
    Warning
  </div>
  <div style='margin-top: 3px;'>
    <jqxNumberInput #numericInput5
                    [template]="'warning'"
                    [spinButtons]="true"
                    [width]="250"
                    [height]="25">
    </jqxNumberInput>
  </div>
  <div style='margin-top: 10px;'>
    Danger
  </div>
  <div style='margin-top: 3px;'>
    <jqxNumberInput #numericInput6
                    [template]="'danger'"
                    [spinButtons]="true"
                    [width]="250"
                    [height]="25">
    </jqxNumberInput>
  </div>
</div>