jqwidgets-scripts-custom/demos/Angular/grid/pagermodes/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="font-size: 13px; font-family: Verdana; float: left; width: 100%;">

    <jqxGrid [theme]="'material'" #myGrid
        [width]="getWidth()" [source]="dataAdapter" [columns]="columns"
        [pageable]="true" [sortable]="true" [columnsresize]="true"
        [autoheight]="true" [pagermode]="'simple'" [selectionmode]="'multiplerowsextended'">
    </jqxGrid>

  <div style="margin-top: 30px">
    <div style="float: left">
        Pager Settings:

        <jqxDropDownList [theme]="'material'" (onSelect)="myListOnSelect($event)"
            [width]="150" [height]="25" [selectedIndex]="1"
            [autoDropDownHeight]="true" [source]="['Default', 'Simple']">
        </jqxDropDownList>

    </div>
  </div>

</div>