jqwidgets-scripts-custom/demos/Angular/dropdownlist/animation/src/app/app.component.html

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

<div style="float: left; font-size: 13px; font-family: Verdana">
    <h3>Animation Type</h3>

    <jqxRadioButton [theme]="'material'" (onChecked)="noneAnimationBtnOnChacked()">
        None
    </jqxRadioButton>

    <jqxRadioButton [theme]="'material'" style="margin-top: 10px" (onChecked)="slideAnimationBtnOnChacked()">
        Slide
    </jqxRadioButton>

    <jqxRadioButton [theme]="'material'" style="margin-top: 10px" (onChecked)="fadeAnimationBtnOnChacked()" checked={true}>
        Fade
    </jqxRadioButton>

</div>

<jqxDropDownList [theme]="'material'" #myDropDownList style="float: left; margin-top: 20px; margin-left: 100px"
    [width]="150" [height]="30" [source]="dataAdapter" [selectedIndex]="0"
    [animationType]="'fade'" [dropDownHorizontalAlignment]="'right'"
    [dropDownWidth]="200" [displayMember]="'ContactName'" [valueMember]="'CompanyName'">
</jqxDropDownList>