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

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

<jqxScrollView [theme]="'material'" [width]='500' [height]='350' [slideShow]='true' [showButtons]='false'>
    <div>
        <div class="photo" style="background-image: url(https://www.jqwidgets.com/angular/images/imageNature1.jpg)"></div>
    </div>
    <div>
        <div class="photo" style="background-image: url(https://www.jqwidgets.com/angular/images/imageNature2.jpg)"></div>
    </div>
    <div>
        <div class="photo" style="background-image: url(https://www.jqwidgets.com/angular/images/imageNature3.jpg)"></div>
    </div>
    <div>
        <div class="photo" style="background-image: url(https://www.jqwidgets.com/angular/images/imageNature4.jpg)"></div>
    </div>
    <div>
        <div class="photo" style="background-image: url(https://www.jqwidgets.com/angular/images/imageNature5.jpg)"></div>
    </div>
</jqxScrollView>

<br />
<label style="margin-left: 5px; font-size: 12px; font-family: Verdana;">
    Select Frame color
</label>
<br />

<jqxDropDownButton [theme]="'material'" #dropDownButton style="margin: 3px; float: left" 
    [width]='150' [height]='22'>
    <div style="padding: 3px;">

        <jqxColorPicker (onColorchange)="colorPickerEvent($event)"
            [width]='220' [height]='220' [colorMode]='"hue"'>
        </jqxColorPicker>

    </div>
</jqxDropDownButton>