jqwidgets-scripts-custom/demos/Angular/combobox/settings/src/app/app.component.html

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

<jqxComboBox [theme]="'material'" #myComboBox style="float: left; margin-top: 10px"
    [width]="200" height="25" [source]="comboBoxSource" [selectedIndex]="0">
</jqxComboBox>

<jqxExpander [theme]="'material'" style="float: left; margin-left: 100px; margin-top: 10px"
    [width]="220" [showArrow]="false" [toggleMode]="'none'">
    <div>Settings</div>
    <div style="padding: 10px;">
      <span>Search Type:</span>
  
      <div style="margin-top: 10px"></div>
      <jqxDropDownList [theme]="'material'" (onSelect)="dropDownListOnSelect($event)"
          [width]="200" [height]="30" [source]="dropDownListSource" [selectedIndex]="0">
      </jqxDropDownList>

      <div style="margin-top: 10px;">

        <jqxButton [theme]="'material'" style="float: left; margin-right: 0.5em" [width]="80"
            (onClick)="btnOpenOnClick()">
            Open
        </jqxButton>

        <jqxButton [theme]="'material'" style="float: left" [width]="80"
            (onClick)="btnCloseOnClick()">
            Close
        </jqxButton>

      </div>

      <div style="clear: both"></div>
      <div style="clear: both; margin-top: 10px"></div>
      <jqxCheckBox [theme]="'material'" [width]="120"
          (onChange)="checkBoxAutoCompleteOnChange($event)">
          Auto Complete
      </jqxCheckBox>

      <div style="margin-top: 10px"></div>
      <jqxCheckBox [theme]="'material'" [width]="120" [checked]="true"
          (onChange)="checkBoxEnabledOnChange($event)">
          Enabled
      </jqxCheckBox>

    </div>
</jqxExpander>