jqwidgets-scripts-custom/demos/Angular/datetimeinput/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">
  <h3>Animation Type</h3>

  <jqxRadioButton [theme]="'material'"
      (onChecked)="noneAnimationBtn()" [checked]="false">
      None
  </jqxRadioButton>

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

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

</div>

<jqxDateTimeInput [theme]="'material'" #myDateTimeInput style="float: left; margin-top: 40px; margin-left: 100px"
    [width]="150" [height]="30" [animationType]="'fade'"
    [dropDownHorizontalAlignment]="'right'">
</jqxDateTimeInput>