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

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

<jqxToolbar [theme]="'material'" #myToolBar 
    [width]="'100%'" [height]="35"
    [initTools]="initTools" [tools]="tools">
</jqxToolbar>

<div style="margin-top: 50px">

    <jqxButton [theme]="'material'" (onClick)="addToggleBtnOnClick()" [width]="150">Add a Toggle Button</jqxButton>
    <jqxButton [theme]="'material'" (onClick)="addCustomToolBtnOnClick()" [width]="150">Add a Custom Tool</jqxButton>

</div>

<div style="margin-top: 10px; margin-bottom: 2px">
    Insert position:
</div>

<jqxDropDownList [theme]="'material'" #myDropDownList
    [width]="150" [height]="22" [source]="['first','last']" 
    [selectedIndex]="1" [autoDropDownHeight]="true">
</jqxDropDownList>

<div style="margin-top: 50px">

    <jqxButton [theme]="'material'" (onClick)="disableToolBtnOnClick()" [width]="150">Disable Tool</jqxButton>
    <jqxButton [theme]="'material'" (onClick)="enableToolBtnOnClick()"  [width]="150">Enable Tool</jqxButton>
    <jqxButton [theme]="'material'" (onClick)="destroyToolBtnOnClick()" [width]="150">Destroy Tool</jqxButton>

</div>

<div style="margin-top: 10px; margin-bottom: 2px">
   Tool index:
</div>

<jqxNumberInput [theme]="'material'" #myNumberInput
    [width]="50" [height]="25" [decimal]="0" 
    [decimalDigits]="0" [inputMode]="'simple'">
</jqxNumberInput>