diff --git a/CHANGELOG.md b/CHANGELOG.md
index 850637d75b5..5175d114b53 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,9 @@ All notable changes for each version of this project will be documented in this
     - The `igx-drop-down-item` now allows for `igxPrefix`, `igxSuffix` and `igx-divider` directives to be passed as `ng-content` and they will be renderer accordingly in the item's content.
 - `IgxGrid`
     - Added support for exporting grouped data.
+    - `onPagingDone` output is removed. Use the `paging` and `pagingDone` outputs exposed by the `IgxPaginator`.
+- `IgxPaginator`
+    - `paging` and `pagingDone` events are now emitted.
 - `IgxInput` now supports `type="file"` and its styling upon all themes.  
    _Note: validation of file type input is not yet supported._
 
@@ -57,6 +60,8 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxHierarchicalGrid`, `IgxTreeGrid`
     - Added new property `selectRowOnClick` that determines whether clicking over a row will change its selection state or not. Set to `true` by default.
     - `GridPagingMode` enum members rename - `local` to `Local` and `remote` to `Remote`. Example:  `GridPagingMode.Local`.
+    - **Breaking Change**:
+        - The grids deprecate the `page` and `perPage` properties, also the `onPagingDone` output. Use the corresponding `IgxPaginator` otuputs/inputs..
 
 ## 11.0.4
 
diff --git a/projects/igniteui-angular/src/lib/grids/common/events.ts b/projects/igniteui-angular/src/lib/grids/common/events.ts
index 822ffefe354..b01640c8b90 100644
--- a/projects/igniteui-angular/src/lib/grids/common/events.ts
+++ b/projects/igniteui-angular/src/lib/grids/common/events.ts
@@ -70,14 +70,6 @@ export interface IPinColumnEventArgs extends IBaseEventArgs {
 export interface IPinColumnCancellableEventArgs extends IPinColumnEventArgs, CancelableEventArgs {
 }
 
-/**
- * The event arguments after a page is changed.
- */
-export interface IPageEventArgs extends IBaseEventArgs {
-    previous: number;
-    current: number;
-}
-
 export interface IRowDataEventArgs extends IBaseEventArgs {
     data: any;
 }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
index 003e5307eb5..389b4bb0d2b 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -117,7 +117,6 @@ import {
     IRowSelectionEventArgs,
     IPinColumnEventArgs,
     IGridEditEventArgs,
-    IPageEventArgs,
     IRowDataEventArgs,
     IColumnResizeEventArgs,
     IColumnMovingStartEventArgs,
@@ -140,8 +139,7 @@ import {
     IFilteringEventArgs,
     IColumnVisibilityChangedEventArgs,
     IColumnVisibilityChangingEventArgs,
-    IPinColumnCancellableEventArgs,
-    IColumnResizingEventArgs
+    IPinColumnCancellableEventArgs
 } from './common/events';
 import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';
 import { GridType } from './common/grid.interface';
@@ -155,7 +153,7 @@ import { IgxGridExcelStyleFilteringComponent } from './filtering/excel-style/gri
 import { IgxSnackbarComponent } from '../snackbar/snackbar.component';
 import { v4 as uuidv4 } from 'uuid';
 import { IgxActionStripComponent } from '../action-strip/action-strip.component';
-import { DeprecateProperty } from '../core/deprecateDecorators';
+import { DeprecateMethod, DeprecateProperty } from '../core/deprecateDecorators';
 
 let FAKE_ROW_ID = -1;
 
@@ -292,6 +290,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     public onScroll = new EventEmitter<IGridScrollEventArgs>();
 
     /**
+     * @deprecated Use `IgxPaginator` corresponding output instead.
      * Emitted after the current page is changed.
      *
      * @example
@@ -304,10 +303,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * }
      * ```
      */
+    @DeprecateProperty('Use the corresponding output exposed by the `igx-paginator`.')
     @Output()
     public pageChange = new EventEmitter<number>();
 
     /**
+     * @deprecated Use `IgxPaginator` corresponding output instead.
      * Emitted when `perPage` property value of the grid is changed.
      *
      * @example
@@ -320,6 +321,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * }
      * ```
      */
+    @DeprecateProperty('Use the corresponding output exposed by the `igx-paginator`.')
     @Output()
     public perPageChange = new EventEmitter<number>();
 
@@ -669,19 +671,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @Output()
     public onFilteringDone = new EventEmitter<IFilteringExpressionsTree>();
 
-    /**
-     * Emitted after paging is performed.
-     *
-     * @remarks
-     * Returns an object consisting of the previous and next pages.
-     * @example
-     * ```html
-     * <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true" (onPagingDone)="pagingDone($event)"></igx-grid>
-     * ```
-     */
-    @Output()
-    public onPagingDone = new EventEmitter<IPageEventArgs>();
-
     /**
      * Emitted when a row added through the API.
      *
@@ -1451,7 +1440,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             return;
         }
         this.selectionService.clear(true);
-        this.onPagingDone.emit({ previous: this._page, current: val });
         this._page = val;
         this.pageChange.emit(this._page);
         this.navigateTo(0);
@@ -1480,7 +1468,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.selectionService.clear(true);
         this._perPage = val;
         this.perPageChange.emit(this._perPage);
-        this.page = 0;
+
+        if (this.totalPages !== 0 && this._page >= this.totalPages) {
+            this.page = this.totalPages - 1;
+        }
+
         this.endEdit(true);
         this.notifyChanges();
     }
@@ -2936,6 +2928,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     public abstract id: string;
     abstract data: any[];
     abstract filteredData: any[];
+
     /**
      * Returns an array containing the filtered sorted data.
      *
@@ -3070,6 +3063,53 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.cdr.detach();
     }
 
+    /**
+     * @deprecated Use `IgxPaginator` corresponding method instead.
+     * Goes to the desired page index.
+     *
+     * @example
+     * ```typescript
+     * this.grid1.paginate(1);
+     * ```
+     * @param val
+     */
+    @DeprecateProperty('Use the corresponding method exposed by the `igx-paginator`.')
+    public paginate(val: number): void {
+        if (val < 0 || val > this.totalPages - 1) {
+            return;
+        }
+
+        this.page = val;
+    }
+
+    /**
+     * @deprecated Use `IgxPaginator` corresponding method instead.
+     * Goes to the next page, if the grid is not already at the last page.
+     *
+     * @example
+     * ```typescript
+     * this.grid1.nextPage();
+     * ```
+     */
+    @DeprecateProperty('Use the corresponding method exposed by the `igx-paginator`.')
+    public nextPage(): void {
+        this.paginate(this._page + 1);
+    }
+
+    /**
+     * @deprecated Use `IgxPaginator` corresponding methods instead.
+     * Goes to the previous page, if the grid is not already at the first page.
+     *
+     * @example
+     * ```typescript
+     * this.grid1.previousPage();
+     * ```
+     */
+    @DeprecateProperty('Use the corresponding method exposed by the `igx-paginator`.')
+    public previousPage(): void {
+        this.paginate(this._page - 1);
+    }
+
     /**
      * @hidden
      * @internal
@@ -3290,11 +3330,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
                 });
             });
 
-        this.onPagingDone.pipe(destructor).subscribe(() => {
-            this.endEdit(true);
-            this.selectionService.clear(true);
-        });
-
         this.onColumnMoving.pipe(destructor).subscribe(() => this.endEdit(true));
         this.onColumnResized.pipe(destructor).subscribe(() => this.endEdit(true));
 
@@ -3370,6 +3405,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         });
     }
 
+    /** @hidden @internal */
+    public _pagingDone() {
+        this.endEdit(true);
+        this.selectionService.clear(true);
+    }
+
     /**
      * @hidden
      */
@@ -3794,7 +3835,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this._userOutletDirective = val;
     }
 
-
     /**
      * Gets the default row height.
      *
@@ -4101,6 +4141,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
+     * @deprecated Use `IgxPaginator` corresponding method instead.
      * Gets the total number of pages.
      *
      * @example
@@ -4108,14 +4149,16 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * const totalPages = this.grid.totalPages;
      * ```
      */
+    @DeprecateProperty('Use the corresponding method exposed by the `igx-paginator`.')
     public get totalPages(): number {
         if (this.pagingState) {
             return this.pagingState.metadata.countPages;
         }
-        return this._totalRecords >= 0 ? Math.ceil(this._totalRecords / this.perPage) : -1;
+        return this._totalRecords >= 0 ? Math.ceil(this._totalRecords / this._perPage) : -1;
     }
 
     /**
+     * @deprecated Use `IgxPaginator` corresponding method instead.
      * Gets if the current page is the first page.
      *
      * @example
@@ -4123,36 +4166,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * const firstPage = this.grid.isFirstPage;
      * ```
      */
+    @DeprecateProperty('Use the corresponding method exposed by the `igx-paginator`.')
     public get isFirstPage(): boolean {
-        return this.page === 0;
-    }
-
-    /**
-     * Goes to the next page, if the grid is not already at the last page.
-     *
-     * @example
-     * ```typescript
-     * this.grid1.nextPage();
-     * ```
-     */
-    public nextPage(): void {
-        if (!this.isLastPage) {
-            this.page += 1;
-        }
-    }
-
-    /**
-     * Goes to the previous page, if the grid is not already at the first page.
-     *
-     * @example
-     * ```typescript
-     * this.grid1.previousPage();
-     * ```
-     */
-    public previousPage(): void {
-        if (!this.isFirstPage) {
-            this.page -= 1;
-        }
+        return this._page === 0;
     }
 
     /**
@@ -4179,6 +4195,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
+     * @deprecated
      * Returns if the current page is the last page.
      *
      * @example
@@ -4186,8 +4203,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * const lastPage = this.grid.isLastPage;
      * ```
      */
+    @DeprecateMethod('Use the corresponding method exposed by the `igx-paginator`.')
     public get isLastPage(): boolean {
-        return this.page + 1 >= this.totalPages;
+        return this._page + 1 >= this.totalPages;
     }
 
     /**
@@ -4284,23 +4302,6 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this._columnsReordered(column, target);
     }
 
-    /**
-     * Goes to the desired page index.
-     *
-     * @example
-     * ```typescript
-     * this.grid1.paginate(1);
-     * ```
-     * @param val
-     */
-    public paginate(val: number): void {
-        if (val < 0 || val > this.totalPages - 1) {
-            return;
-        }
-
-        this.page = val;
-    }
-
     /**
      * Manually marks the `IgxGridComponent` for change detection.
      *
@@ -6729,7 +6730,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
         // eslint-disable-next-line prefer-const
         for (let [row, set] of selectionMap) {
-            row = this.paging ? row + (this.perPage * this.page) : row;
+            row = this.paging ? row + (this._perPage * this._page) : row;
             row = isRemote ? row - this.virtualizationState.startIndex : row;
             if (!source[row] || source[row].detailsData !== undefined) {
                 continue;
@@ -6845,7 +6846,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             const rowIndex = inCollection.indexOf(row);
             const page = Math.floor(rowIndex / this.perPage);
 
-            if (this.page !== page) {
+            if (this._page !== page) {
                 delayScrolling = true;
                 this.page = page;
             }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
index 78fe5828255..ee73a8b1f0f 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -243,7 +243,7 @@
 </div>
 
 <ng-template #defaultPaginator>
-    <igx-paginator [overlaySettings]="paginatorSettings" [displayDensity]="displayDensity" [(page)]="page" [totalRecords]="totalRecords" [(perPage)]="perPage">
+    <igx-paginator [overlaySettings]="paginatorSettings" [displayDensity]="displayDensity" [(page)]="page" [totalRecords]="totalRecords" [(perPage)]="perPage" (pagingDone)="_pagingDone()">
     </igx-paginator>
 </ng-template>
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts
index 7f1a0b4df1e..ff411e58284 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts
@@ -84,19 +84,16 @@ describe('IgxGrid - Grid Paging #grid', () => {
         it('should paginate data API', () => {
 
          // Goto page 3 through API and listen for event
-            spyOn(grid.onPagingDone, 'emit');
             grid.paginate(2);
 
             fix.detectChanges();
 
-            expect(grid.onPagingDone.emit).toHaveBeenCalled();
             verifyGridPager(fix, 3, '7', '3\xA0of\xA04', []);
 
             // Go to next page
             grid.nextPage();
             fix.detectChanges();
 
-            expect(grid.onPagingDone.emit).toHaveBeenCalledTimes(2);
             expect(grid.isLastPage).toBe(true);
             verifyGridPager(fix, 1, '10', '4\xA0of\xA04', []);
 
@@ -105,14 +102,12 @@ describe('IgxGrid - Grid Paging #grid', () => {
             fix.detectChanges();
 
             expect(grid.isLastPage).toBe(true);
-            expect(grid.onPagingDone.emit).toHaveBeenCalledTimes(2);
             verifyGridPager(fix, 1, '10', '4\xA0of\xA04', []);
 
             // Go to previous page
             grid.previousPage();
             fix.detectChanges();
 
-            expect(grid.onPagingDone.emit).toHaveBeenCalledTimes(3);
             verifyGridPager(fix, 3, '7', '3\xA0of\xA04', []);
             expect(grid.isLastPage).toBe(false);
             expect(grid.isFirstPage).toBe(false);
@@ -121,7 +116,6 @@ describe('IgxGrid - Grid Paging #grid', () => {
             grid.paginate(0);
             fix.detectChanges();
 
-            expect(grid.onPagingDone.emit).toHaveBeenCalledTimes(4);
             verifyGridPager(fix, 3, '1', '1\xA0of\xA04', []);
             expect(grid.isFirstPage).toBe(true);
 
@@ -129,7 +123,6 @@ describe('IgxGrid - Grid Paging #grid', () => {
             grid.previousPage();
             fix.detectChanges();
 
-            expect(grid.onPagingDone.emit).toHaveBeenCalledTimes(4);
             verifyGridPager(fix, 3, '1', '1\xA0of\xA04', []);
             expect(grid.isFirstPage).toBe(true);
 
@@ -137,7 +130,6 @@ describe('IgxGrid - Grid Paging #grid', () => {
             grid.paginate(-3);
             fix.detectChanges();
 
-            expect(grid.onPagingDone.emit).toHaveBeenCalledTimes(4);
             verifyGridPager(fix, 3, '1', '1\xA0of\xA04', []);
         });
 
@@ -197,15 +189,15 @@ describe('IgxGrid - Grid Paging #grid', () => {
             expect(grid.nativeElement.querySelectorAll('.igx-paginator > select').length).toEqual(0);
         });
 
-        it('change paging pages per page API', (async () => {
+        it('change paging pages per page API', fakeAsync(() => {
 
             grid.height = '300px';
             grid.perPage = 2;
-            await wait();
+            tick();
             fix.detectChanges();
 
             grid.page = 1;
-            await wait();
+            tick();
             fix.detectChanges();
 
             expect(grid.paging).toBeTruthy();
@@ -213,33 +205,28 @@ describe('IgxGrid - Grid Paging #grid', () => {
             verifyGridPager(fix, 2, '3', '2\xA0of\xA05', []);
 
             // Change page size to be 5
-            spyOn(grid.onPagingDone, 'emit');
             grid.perPage = 5;
-            await wait();
+            tick();
             fix.detectChanges();
             let vScrollBar = grid.verticalScrollContainer.getScroll();
-            expect(grid.onPagingDone.emit).toHaveBeenCalledTimes(1);
-            verifyGridPager(fix, 5, '1', '1\xA0of\xA02', [true, true, false, false]);
+            verifyGridPager(fix, 5, '6', '2\xA0of\xA02', [false, false, true, true]);
             expect(vScrollBar.scrollHeight).toBeGreaterThanOrEqual(250);
             expect(vScrollBar.scrollHeight).toBeLessThanOrEqual(255);
 
             // Change page size to be 33
             grid.perPage = 33;
-            await wait();
+            tick();
             fix.detectChanges();
             vScrollBar = grid.verticalScrollContainer.getScroll();
-            // onPagingDone should be emitted only if we have a change in the page number
-            expect(grid.onPagingDone.emit).toHaveBeenCalledTimes(1);
-            verifyGridPager(fix, 5, '1', '1\xA0of\xA01', [true, true, true, true]);
+            verifyGridPager(fix, 10, '1', '1\xA0of\xA01', [true, true, true, true]);
             expect(vScrollBar.scrollHeight).toBeGreaterThanOrEqual(500);
             expect(vScrollBar.scrollHeight).toBeLessThanOrEqual(510);
 
             // Change page size to be negative
             grid.perPage = -7;
-            await wait();
+            tick();
             fix.detectChanges();
-            expect(grid.onPagingDone.emit).toHaveBeenCalledTimes(1);
-            verifyGridPager(fix, 5, '1', '1\xA0of\xA01', [true, true, true, true]);
+            verifyGridPager(fix, 10, '1', '1\xA0of\xA01', [true, true, true, true]);
             expect(vScrollBar.scrollHeight).toBeGreaterThanOrEqual(500);
             expect(vScrollBar.scrollHeight).toBeLessThanOrEqual(510);
         }));
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
index 60ac7bd7506..70054720aec 100644
--- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -210,7 +210,7 @@
 
 <ng-template #defaultPaginator>
     <igx-paginator [overlaySettings]="paginatorSettings" [displayDensity]="displayDensity" [(page)]="page" [totalRecords]="totalRecords"
-        [(perPage)]="perPage">
+        [(perPage)]="perPage" (pagingDone)="_pagingDone()">
     </igx-paginator>
 </ng-template>
 
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
index f6c7ebfa137..6b96dd0607d 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -177,7 +177,7 @@
 
 <ng-template #defaultPaginator>
     <igx-paginator [overlaySettings]="paginatorSettings" [displayDensity]="displayDensity" [(page)]="page" [totalRecords]="totalRecords"
-        [(perPage)]="perPage">
+        [(perPage)]="perPage" (pagingDone)="_pagingDone()">
     </igx-paginator>
 </ng-template>
 
diff --git a/projects/igniteui-angular/src/lib/paginator/interfaces.ts b/projects/igniteui-angular/src/lib/paginator/interfaces.ts
new file mode 100644
index 00000000000..084d42a2e98
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/paginator/interfaces.ts
@@ -0,0 +1,16 @@
+import { IBaseEventArgs, CancelableBrowserEventArgs } from '../core/utils';
+
+/**
+ * The event arguments after a page is changed.
+ * `oldPage` is the last active page, `newPage` is the current page.
+ */
+export interface IPagingDoneEventArgs extends IBaseEventArgs {
+    oldPage: number;
+    newPage: number;
+}
+
+/**
+ * The event arguments before a page is changed.
+ * `oldPage` is the currently active page, `newPage` is the page that will be active if the operation completes succesfully.
+ */
+export interface IPagingEventArgs extends CancelableBrowserEventArgs, IPagingDoneEventArgs { }
diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.html b/projects/igniteui-angular/src/lib/paginator/paginator.component.html
index bf190f61d25..862dbce20c0 100644
--- a/projects/igniteui-angular/src/lib/paginator/paginator.component.html
+++ b/projects/igniteui-angular/src/lib/paginator/paginator.component.html
@@ -1,7 +1,11 @@
 <div class="igx-paginator__select" [hidden]="dropdownHidden">
     <label class="igx-paginator__label">{{ resourceStrings.igx_paginator_label }}</label>
     <div class="igx-paginator__select-input">
-        <igx-select [overlaySettings]="overlaySettings" [(ngModel)]="perPage" [displayDensity]="paginatorSelectDisplayDensity()" type="border"
+        <igx-select
+            [overlaySettings]="overlaySettings"
+            [(ngModel)]="perPage"
+            [displayDensity]="paginatorSelectDisplayDensity()"
+            type="border"
             [disabled]="!dropdownEnabled">
             <label igxLabel [hidden]="true">{{ resourceStrings.igx_paginator_label }}</label>
             <igx-select-item [value]="val" *ngFor="let val of selectOptions">
@@ -11,10 +15,24 @@
     </div>
 </div>
 <div class="igx-paginator__pager" [hidden]="pagerHidden" role="navigation">
-    <button [title]="resourceStrings.igx_paginator_first_page_button_text" [disabled]="isFirstPageDisabled" [attr.aria-disabled]="isFirstPageDisabled" (click)="paginate(0)" igxButton="icon" igxRipple igxRippleCentered="true">
+    <button
+        [title]="resourceStrings.igx_paginator_first_page_button_text"
+        [disabled]="isFirstPageDisabled"
+        [attr.aria-disabled]="isFirstPageDisabled"
+        (click)="paginate(0)"
+        igxButton="icon"
+        igxRipple
+        igxRippleCentered="true">
         <igx-icon>first_page</igx-icon>
     </button>
-    <button [title]="resourceStrings.igx_paginator_previous_page_button_text" [disabled]="isFirstPageDisabled" [attr.aria-disabled]="isFirstPageDisabled" (click)="previousPage()" igxButton="icon" igxRipple igxRippleCentered="true">
+    <button
+        [title]="resourceStrings.igx_paginator_previous_page_button_text"
+        [disabled]="isFirstPageDisabled"
+        [attr.aria-disabled]="isFirstPageDisabled"
+        (click)="previousPage()"
+        igxButton="icon"
+        igxRipple
+        igxRippleCentered="true">
         <igx-icon>chevron_left</igx-icon>
     </button>
     <div class='igx-paginator__pager-text' aria-current="page">
@@ -22,10 +40,23 @@
         <span>&nbsp;{{ resourceStrings.igx_paginator_pager_text }}&nbsp;</span>
         <span>{{ totalPages }}</span>
     </div>
-    <button [title]="resourceStrings.igx_paginator_next_page_button_text" [disabled]="isLastPageDisabled" [attr.aria-disabled]="isLastPageDisabled" (click)="nextPage()" igxRipple igxRippleCentered="true" igxButton="icon">
+    <button
+        [title]="resourceStrings.igx_paginator_next_page_button_text"
+        [disabled]="isLastPageDisabled"
+        [attr.aria-disabled]="isLastPageDisabled"
+        (click)="nextPage()"
+        igxRipple
+        igxRippleCentered="true"
+        igxButton="icon">
         <igx-icon>chevron_right</igx-icon>
     </button>
-    <button [title]="resourceStrings.igx_paginator_last_page_button_text" [disabled]="isLastPageDisabled" [attr.aria-disabled]="isLastPageDisabled" (click)="paginate(totalPages - 1)" igxButton="icon" igxRipple
+    <button
+        [title]="resourceStrings.igx_paginator_last_page_button_text"
+        [disabled]="isLastPageDisabled"
+        [attr.aria-disabled]="isLastPageDisabled"
+        (click)="paginate(totalPages - 1)"
+        igxButton="icon"
+        igxRipple
         igxRippleCentered="true">
         <igx-icon>last_page</igx-icon>
     </button>
diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.spec.ts b/projects/igniteui-angular/src/lib/paginator/paginator.component.spec.ts
index 7cc7f470c07..e1086f8cdd0 100644
--- a/projects/igniteui-angular/src/lib/paginator/paginator.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/paginator/paginator.component.spec.ts
@@ -1,11 +1,33 @@
-import { TestBed, waitForAsync } from '@angular/core/testing';
+import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { ViewChild, Component } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxPaginatorComponent, IgxPaginatorModule } from './paginator.component';
 import { configureTestSuite } from '../test-utils/configure-suite';
-import { GridFunctions } from '../test-utils/grid-functions.spec';
+import { BUTTON_DISABLED_CLASS, PaginatorFunctions, PAGER_CLASS } from '../test-utils/paginator-functions.spec';
 import { ControlsFunction } from '../test-utils/controls-functions.spec';
+import { IPagingEventArgs } from './interfaces';
+
+const verifyPager = (fix, perPage, pagerText, buttonsVisibility) => {
+    const paginator: IgxPaginatorComponent = fix.componentInstance.paginator;
+    const element = paginator.nativeElement;
+
+    expect(paginator.perPage).toEqual(perPage, 'Invalid number of perpage');
+
+    if (pagerText != null) {
+        expect(element.querySelector(PAGER_CLASS)).toBeDefined();
+        expect(element.querySelectorAll('igx-select').length).toEqual(1);
+        expect(element.querySelector('.igx-paginator__pager > div').textContent).toMatch(pagerText);
+    }
+    if (buttonsVisibility != null && buttonsVisibility.length === 4) {
+        const pagingButtons = PaginatorFunctions.getPagingButtons(element);
+        expect(pagingButtons.length).toEqual(4);
+        expect(pagingButtons[0].className.includes(BUTTON_DISABLED_CLASS)).toBe(buttonsVisibility[0]);
+        expect(pagingButtons[1].className.includes(BUTTON_DISABLED_CLASS)).toBe(buttonsVisibility[1]);
+        expect(pagingButtons[2].className.includes(BUTTON_DISABLED_CLASS)).toBe(buttonsVisibility[2]);
+        expect(pagingButtons[3].className.includes(BUTTON_DISABLED_CLASS)).toBe(buttonsVisibility[3]);
+    }
+};
 
 describe('IgxPaginator with default settings', () => {
     configureTestSuite();
@@ -17,11 +39,20 @@ describe('IgxPaginator with default settings', () => {
             imports: [IgxPaginatorModule, NoopAnimationsModule]
         }).compileComponents();
     }));
-    it('should calculate number of pages correctly', () => {
-        const fix = TestBed.createComponent(DefaultPaginatorComponent);
+
+    let fix;
+    let paginator: IgxPaginatorComponent;
+
+    beforeEach(fakeAsync(() => {
+        fix = TestBed.createComponent(DefaultPaginatorComponent);
         fix.detectChanges();
-        const paginator = fix.componentInstance.paginator;
+        paginator = fix.componentInstance.paginator;
+    }));
 
+    it('should calculate number of pages correctly', () => {
+        fix = TestBed.createComponent(DefaultPaginatorComponent);
+        fix.detectChanges();
+        paginator = fix.componentInstance.paginator;
         let totalPages = paginator.totalPages;
         expect(totalPages).toBe(3);
 
@@ -32,24 +63,123 @@ describe('IgxPaginator with default settings', () => {
         expect(totalPages).toBe(5);
     });
 
+    it('should paginate data UI', () => {
+        spyOn(paginator.paging, 'emit').and.callThrough();
+        spyOn(paginator.pagingDone, 'emit').and.callThrough();
+
+        const sub = paginator.paging.subscribe((e: IPagingEventArgs) => {
+            e.newPage = newPage ? newPage : e.newPage;
+            e.cancel = cancelEvent;
+        });
+
+        verifyPager(fix, 15, '1\xA0of\xA03', [true, true, false, false]);
+
+        // Go to next page
+        PaginatorFunctions.navigateToNextPage(paginator.nativeElement);
+        fix.detectChanges();
+        verifyPager(fix, 15, '2\xA0of\xA03', [false, false, false, false]);
+        expect(paginator.paging.emit).toHaveBeenCalledTimes(1);
+        expect(paginator.pagingDone.emit).toHaveBeenCalledTimes(1);
+
+        // Go to last page
+        PaginatorFunctions.navigateToLastPage(paginator.nativeElement);
+        fix.detectChanges();
+        verifyPager(fix, 15, '3\xA0of\xA03', [false, false, true, true]);
+        expect(paginator.paging.emit).toHaveBeenCalledTimes(2);
+        expect(paginator.pagingDone.emit).toHaveBeenCalledTimes(2);
+
+        // Go to previous page
+        PaginatorFunctions.navigateToPrevPage(paginator.nativeElement);
+        fix.detectChanges();
+        verifyPager(fix, 15, '2\xA0of\xA03', [false, false, false, false]);
+        expect(paginator.paging.emit).toHaveBeenCalledTimes(3);
+        expect(paginator.pagingDone.emit).toHaveBeenCalledTimes(3);
+
+        // Go to first page
+        PaginatorFunctions.navigateToFirstPage(paginator.nativeElement);
+        fix.detectChanges();
+        verifyPager(fix, 15, '1\xA0of\xA03', [true, true, false, false]);
+        expect(paginator.paging.emit).toHaveBeenCalledTimes(4);
+        expect(paginator.pagingDone.emit).toHaveBeenCalledTimes(4);
+
+        // change page in event
+        const newPage = 2;
+        PaginatorFunctions.navigateToNextPage(paginator.nativeElement);
+        fix.detectChanges();
+        verifyPager(fix, 15, '3\xA0of\xA03', [false, false, true, true]);
+        expect(paginator.paging.emit).toHaveBeenCalledTimes(5);
+        expect(paginator.pagingDone.emit).toHaveBeenCalledTimes(5);
+
+        // cancel event
+        const cancelEvent = true;
+        PaginatorFunctions.navigateToFirstPage(paginator.nativeElement);
+        fix.detectChanges();
+        verifyPager(fix, 15, '3\xA0of\xA03', [false, false, true, true]);
+        expect(paginator.paging.emit).toHaveBeenCalledTimes(6);
+        expect(paginator.pagingDone.emit).toHaveBeenCalledTimes(5);
+
+        sub.unsubscribe();
+    });
+
+    it('change paging settings UI', () => {
+        expect(paginator.perPage).toEqual(15, 'Invalid page size');
+
+        verifyPager(fix, 15, '1\xA0of\xA03', []);
+
+        // Change page size
+        PaginatorFunctions.clickOnPageSelectElement(fix);
+        fix.detectChanges();
+        ControlsFunction.clickDropDownItem(fix, 0);
+
+        expect(paginator.perPage).toEqual(5, 'Invalid page size');
+        verifyPager(fix, 5, '1\xA0of\xA09', []);
+    });
+
+    it('should be able to set totalRecords', () => {
+        fix = TestBed.createComponent(DefaultPaginatorComponent);
+        fix.detectChanges();
+        paginator = fix.componentInstance.paginator;
+        paginator.perPage = 5;
+        fix.detectChanges();
+
+        expect(paginator.perPage).toEqual(5, 'Invalid page size');
+        expect(paginator.totalRecords).toBe(42);
+        verifyPager(fix, 5, '1\xA0of\xA09', []);
+
+        paginator.totalRecords = 4;
+        fix.detectChanges();
+
+        expect(paginator.perPage).toEqual(5, 'Invalid page size');
+        expect(paginator.totalRecords).toBe(4);
+        verifyPager(fix, 5, '1\xA0of\xA01', []);
+    });
+
     it('should change current page to equal last page, after changing perPage', () => {
-        const fix = TestBed.createComponent(DefaultPaginatorComponent);
+        fix = TestBed.createComponent(DefaultPaginatorComponent);
+        fix.detectChanges();
+        paginator = fix.componentInstance.paginator;
+        spyOn(paginator.paging, 'emit');
+        spyOn(paginator.pagingDone, 'emit');
+
         fix.detectChanges();
-        const paginator = fix.componentInstance.paginator;
 
         paginator.paginate(paginator.totalPages - 1);
-        paginator.perPage = paginator.totalRecords / 2;
+        fix.detectChanges();
+
+        expect(paginator.paging.emit).toHaveBeenCalledTimes(1);
+        expect(paginator.pagingDone.emit).toHaveBeenCalledTimes(1);
 
+        paginator.perPage = paginator.totalRecords / 2;
         fix.detectChanges();
+
+        expect(paginator.paging.emit).toHaveBeenCalledTimes(2);
+        expect(paginator.pagingDone.emit).toHaveBeenCalledTimes(2);
+
         const page = paginator.page;
         expect(page).toBe(1);
     });
 
     it('should disable go to first page when paginator is on first page', () => {
-        const fix = TestBed.createComponent(DefaultPaginatorComponent);
-        fix.detectChanges();
-        const paginator = fix.componentInstance.paginator;
-
         const goToFirstPageButton = fix.debugElement.query(By.css('button')).nativeElement;
 
         expect(goToFirstPageButton.className.includes('igx-button--disabled')).toBe(true);
@@ -66,10 +196,6 @@ describe('IgxPaginator with default settings', () => {
     });
 
     it('should disable go to last page button when paginator is on last page', () => {
-        const fix = TestBed.createComponent(DefaultPaginatorComponent);
-        fix.detectChanges();
-        const paginator = fix.componentInstance.paginator;
-
         const goToLastPageButton = fix.debugElement.query(By.css('button:last-child')).nativeElement;
 
         expect(goToLastPageButton.className.includes('igx-button--disabled')).toBe(false);
@@ -85,21 +211,127 @@ describe('IgxPaginator with default settings', () => {
         expect(goToLastPageButton.className.includes('igx-button--disabled')).toBe(false);
     });
 
+    it('"paginate" method should paginate correctly', () => {
+        const page = (index: number) => paginator.paginate(index);
+        let desiredPageIndex = 2;
+        page(2);
+        fix.detectChanges();
+
+        expect(paginator.page).toBe(desiredPageIndex);
 
-    it('should disable all buttons in the paginate if perPage > total records', () => {
-        const fix = TestBed.createComponent(DefaultPaginatorComponent);
+        // non-existent page, should not paginate
+        page(-2);
         fix.detectChanges();
-        const paginator = fix.componentInstance.paginator;
+        expect(paginator.page).toBe(desiredPageIndex);
+
+        // non-existent page, should not paginate
+        page(666);
+        fix.detectChanges();
+        expect(paginator.page).toBe(desiredPageIndex);
+
+        // first page
+        desiredPageIndex = 0;
+        page(desiredPageIndex);
+        fix.detectChanges();
+        expect(paginator.page).toBe(desiredPageIndex);
+
+        // last page
+        desiredPageIndex = paginator.totalPages - 1;
+        page(desiredPageIndex);
+        fix.detectChanges();
+        expect(paginator.page).toBe(desiredPageIndex);
+
+        // last page + 1, should not paginate
+        page(paginator.totalPages);
+        fix.detectChanges();
+        expect(paginator.page).toBe(desiredPageIndex);
+    });
+
+    it('"page" property should paginate correctly', () => {
+        const page = (index: number) => paginator.page = index;
+        let desiredPageIndex = 2;
+        page(2);
+        fix.detectChanges();
+
+        expect(paginator.page).toBe(desiredPageIndex);
+
+        // non-existent page, should not paginate
+        page(-2);
+        fix.detectChanges();
+        expect(paginator.page).toBe(desiredPageIndex);
+
+        // non-existent page, should not paginate
+        page(666);
+        fix.detectChanges();
+        expect(paginator.page).toBe(desiredPageIndex);
+
+        // first page
+        desiredPageIndex = 0;
+        page(desiredPageIndex);
+        fix.detectChanges();
+        expect(paginator.page).toBe(desiredPageIndex);
+
+        // last page
+        desiredPageIndex = paginator.totalPages - 1;
+        page(desiredPageIndex);
+        fix.detectChanges();
+        expect(paginator.page).toBe(desiredPageIndex);
+
+        // last page + 1, should not paginate
+        page(paginator.totalPages);
+        fix.detectChanges();
+        expect(paginator.page).toBe(desiredPageIndex);
+    });
 
+    it('should disable all buttons in the paginate if perPage > total records', () => {
+        fix = TestBed.createComponent(DefaultPaginatorComponent);
+        fix.detectChanges();
+        paginator = fix.componentInstance.paginator;
         paginator.perPage = 100;
         fix.detectChanges();
 
-        const pagingButtons =  GridFunctions.getPagingButtons(fix.nativeElement);
+        const pagingButtons = PaginatorFunctions.getPagingButtons(fix.nativeElement);
         pagingButtons.forEach(element => {
             expect(element.className.includes('igx-button--disabled')).toBe(true);
         });
     });
 
+    it('change paging pages per page API', fakeAsync(() => {
+        spyOn(paginator.paging, 'emit');
+        spyOn(paginator.pagingDone, 'emit');
+
+        paginator.perPage = 2;
+        tick();
+        fix.detectChanges();
+
+        paginator.page = 1;
+        tick();
+        fix.detectChanges();
+
+        expect(paginator.perPage).toEqual(2, 'Invalid page size');
+        verifyPager(fix, 2, '2\xA0of\xA021', [false, false, false, false]);
+
+        // Change page size to be 5
+        paginator.perPage = 5;
+        tick();
+        fix.detectChanges();
+        verifyPager(fix, 5, '2\xA0of\xA09', [false, false, false, false]);
+
+        // Change page size to be 33
+        paginator.perPage = 33;
+        tick();
+        fix.detectChanges();
+        verifyPager(fix, 33, '2\xA0of\xA02', [false, false, true, true]);
+
+        // Change page size to be negative
+        paginator.perPage = -7;
+        tick();
+        fix.detectChanges();
+        expect(paginator.paging.emit).toHaveBeenCalledTimes(0);
+        expect(paginator.pagingDone.emit).toHaveBeenCalledTimes(0);
+        verifyPager(fix, 33, '2\xA0of\xA02', [false, false, true, true]);
+    }));
+
 });
 
 describe('IgxPaginator with custom settings', () => {
@@ -159,7 +391,7 @@ describe('IgxPaginator with custom settings', () => {
         const select = fix.debugElement.query(By.css('igx-select')).nativeElement;
         const selectDisabled = select.getAttribute('ng-reflect-is-disabled');
 
-        const pagingButtons = GridFunctions.getPagingButtons(fix.nativeElement);
+        const pagingButtons = PaginatorFunctions.getPagingButtons(fix.nativeElement);
         pagingButtons.forEach(element => {
             expect(element.className.includes('igx-button--disabled')).toBe(true);
         });
@@ -180,7 +412,6 @@ describe('IgxPaginator with custom settings', () => {
         expect(selectHidden).toBeTruthy();
         expect(pagerHidden).toBeTruthy();
     });
-
 });
 @Component({
     template: `<igx-paginator [totalRecords]="42"></igx-paginator>`
diff --git a/projects/igniteui-angular/src/lib/paginator/paginator.component.ts b/projects/igniteui-angular/src/lib/paginator/paginator.component.ts
index 50a9689e76c..769389598a9 100644
--- a/projects/igniteui-angular/src/lib/paginator/paginator.component.ts
+++ b/projects/igniteui-angular/src/lib/paginator/paginator.component.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { Component, Input, Output, NgModule, Optional, Inject, EventEmitter, HostBinding } from '@angular/core';
+import { Component, Input, Output, NgModule, Optional, Inject, EventEmitter, HostBinding, ElementRef } from '@angular/core';
 import { CurrentResourceStrings } from '../core/i18n/resources';
 import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase, DisplayDensity } from '../core/displayDensity';
 import { OverlaySettings } from '../services/public_api';
@@ -11,6 +11,7 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxInputGroupModule } from '../input-group/public_api';
 import { IPaginatorResourceStrings } from '../core/i18n/paginator-resources';
 import { DeprecateProperty } from '../core/deprecateDecorators';
+import { IPagingEventArgs, IPagingDoneEventArgs } from './interfaces';
 
 @Component({
     selector: 'igx-paginator',
@@ -100,6 +101,32 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
     @Output()
     public perPageChange = new EventEmitter<number>();
 
+    /**
+     * Emitted before paging is performed.
+     *
+     * @remarks
+     * Returns an object consisting of the old and new pages.
+     * @example
+     * ```html
+     * <igx-paginator (paging)="paging($event)"></igx-paginator>
+     * ```
+     */
+    @Output()
+    public paging = new EventEmitter<IPagingEventArgs>();
+
+    /**
+     * Emitted after paging is performed.
+     *
+     * @remarks
+     * Returns an object consisting of the previous and next pages.
+     * @example
+     * ```html
+     * <igx-paginator (pagingDone)="pagingDone($event)"></igx-paginator>
+     * ```
+     */
+    @Output()
+    public pagingDone = new EventEmitter<IPagingDoneEventArgs>();
+
     /**
      * Emitted after the current page is changed.
      *
@@ -123,7 +150,7 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
 
     protected _page = 0;
     protected _totalRecords: number;
-    protected _selectOptions;
+    protected _selectOptions = [5, 10, 15, 25, 50, 100, 500];
     protected _perPage = 15;
 
     private _resourceStrings = CurrentResourceStrings.PaginatorResStrings;
@@ -164,6 +191,10 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
     }
 
     public set page(value: number) {
+        if (value < 0 || value > this.totalPages - 1 || value === this._page) {
+            return;
+        }
+
         this._page = value;
         this.pageChange.emit(this._page);
     }
@@ -183,12 +214,15 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
     }
 
     public set perPage(value: number) {
+        if (value < 0 || value === this._perPage) {
+            return;
+        }
         this._perPage = Number(value);
         this.perPageChange.emit(this._perPage);
         this._selectOptions = this.sortUniqueOptions(this.defaultSelectValues, this._perPage);
-        this.totalPages = Math.ceil(this.totalRecords / this._perPage);
-        if (this.totalPages !== 0 && this.page >= this.totalPages) {
-            this.page = this.totalPages - 1;
+        this.totalPages = Math.ceil(this._totalRecords / this._perPage);
+        if (this.totalPages !== 0 && this._page >= this.totalPages) {
+            this.paginate(this.totalPages - 1);
         }
     }
 
@@ -248,18 +282,19 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
      * By default it uses EN resources.
      */
     @Input()
-    set resourceStrings(value: IPaginatorResourceStrings) {
+    public set resourceStrings(value: IPaginatorResourceStrings) {
         this._resourceStrings = Object.assign({}, this._resourceStrings, value);
     }
 
     /**
      * An accessor that returns the resource strings.
      */
-    get resourceStrings(): IPaginatorResourceStrings {
+    public get resourceStrings(): IPaginatorResourceStrings {
         return this._resourceStrings;
     }
 
-    constructor(@Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
+    constructor(private elementRef: ElementRef,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
         super(_displayDensityOptions);
     }
 
@@ -269,8 +304,8 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
      * const lastPage = this.paginator.isLastPage;
      * ```
      */
-    get isLastPage(): boolean {
-        return this.page + 1 >= this.totalPages;
+    public get isLastPage(): boolean {
+        return this._page + 1 === this.totalPages;
     }
 
     /**
@@ -279,25 +314,37 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
      * const lastPage = this.paginator.isFirstPage;
      * ```
      */
-    get isFirstPage(): boolean {
-        return this.page === 0;
+    public get isFirstPage(): boolean {
+        return this._page === 0;
     }
 
 
     /**
      * Returns if the first pager buttons should be disabled
      */
-    get isFirstPageDisabled(): boolean {
+    public get isFirstPageDisabled(): boolean {
         return this.isFirstPage || !this.pagerEnabled;
     }
 
     /**
      * Returns if the last pager buttons should be disabled
      */
-    get isLastPageDisabled(): boolean {
+    public get isLastPageDisabled(): boolean {
         return this.isLastPage || !this.pagerEnabled;
     }
 
+    /**
+     * Gets the native element.
+     *
+     * @example
+     * ```typescript
+     * const nativeEl = this.paginator.nativeElement.
+     * ```
+     */
+    public get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+
     /**
      * Sets DisplayDensity for the <select> inside the paginator
      *
@@ -309,6 +356,7 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
         }
         return DisplayDensity.compact;
     }
+
     /**
      * Goes to the next page of the `IgxPaginatorComponent`, if the paginator is not already at the last page.
      * ```typescript
@@ -318,10 +366,9 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
      * @memberof IgxPaginatorComponent
      */
     public nextPage(): void {
-        if (!this.isLastPage) {
-            this.page += 1;
-        }
+        this.paginate(this._page + 1);
     }
+
     /**
      * Goes to the previous page of the `IgxPaginatorComponent`, if the paginator is not already at the first page.
      * ```typescript
@@ -331,10 +378,9 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
      * @memberof IgxPaginatorComponent
      */
     public previousPage(): void {
-        if (!this.isFirstPage) {
-            this.page -= 1;
-        }
+        this.paginate(this._page - 1);
     }
+
     /**
      * Goes to the desired page index.
      * ```typescript
@@ -344,11 +390,23 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
      * @param val
      * @memberof IgxPaginatorComponent
      */
+
     public paginate(val: number): void {
-        if (val < 0 || val > this.totalPages - 1) {
+        if (val < 0 || val > this.totalPages - 1 || val === this._page) {
             return;
         }
-        this.page = val;
+
+        const eventArgs: IPagingDoneEventArgs = { oldPage: this._page, newPage: val };
+        const cancelableEventArgs: IPagingEventArgs = { ...eventArgs, cancel: false, owner: this };
+        this.paging.emit(cancelableEventArgs);
+
+        if (cancelableEventArgs.cancel) {
+            return;
+        }
+
+        this.page = cancelableEventArgs.newPage;
+        eventArgs.newPage = this._page;
+        this.pagingDone.emit(eventArgs);
     }
 
     private sortUniqueOptions(values: Array<number>, newOption: number): number[] {
diff --git a/projects/igniteui-angular/src/lib/test-utils/paginator-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/paginator-functions.spec.ts
new file mode 100644
index 00000000000..fef607ad02b
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/test-utils/paginator-functions.spec.ts
@@ -0,0 +1,42 @@
+import { By } from '@angular/platform-browser';
+import { UIInteractions } from './ui-interactions.spec';
+
+export const PAGER_BUTTONS = '.igx-paginator__pager > button';
+export const BUTTON_DISABLED_CLASS = 'igx-button--disabled';
+export const PAGER_CLASS = '.igx-paginator__pager';
+
+export class PaginatorFunctions {
+    public static getPagingButtons(parent) {
+        return parent.querySelectorAll(PAGER_BUTTONS);
+    }
+
+    public static clickPagingButton(parent, buttonIndex: number) {
+        const pagingButtons = PaginatorFunctions.getPagingButtons(parent);
+        pagingButtons[buttonIndex].dispatchEvent(new Event('click'));
+    }
+
+    public static navigateToFirstPage(parent) {
+        PaginatorFunctions.clickPagingButton(parent, 0);
+    }
+
+    public static navigateToPrevPage(parent) {
+        PaginatorFunctions.clickPagingButton(parent, 1);
+    }
+
+    public static navigateToNextPage(parent) {
+        PaginatorFunctions.clickPagingButton(parent, 2);
+    }
+
+    public static navigateToLastPage(parent) {
+        PaginatorFunctions.clickPagingButton(parent, 3);
+    }
+
+    public static clickOnPageSelectElement(fix) {
+        const select = PaginatorFunctions.getPageSelectElement(fix);
+        UIInteractions.simulateClickEvent(select);
+    }
+
+    public static getPageSelectElement(fix) {
+        return fix.debugElement.query(By.css('igx-select')).nativeElement;
+    }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index eac1ed9fb8c..bc0286a7668 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -142,6 +142,7 @@ import { MainComponent } from './grid-finjs/main.component';
 import { ControllerComponent } from './grid-finjs/controllers.component';
 import { CommonModule } from '@angular/common';
 import { GridEventsComponent } from './grid-events/grid-events.component';
+import { PagingPipe } from './grid-events/pagingPipe';
 
 const components = [
     ActionStripSampleComponent,
@@ -173,6 +174,7 @@ const components = [
     ListPanningSampleComponent,
     ListPerformanceSampleComponent,
     MaskSampleComponent,
+    PagingPipe,
     DateTimeEditorSampleComponent,
     NavbarSampleComponent,
     NavdrawerSampleComponent,
@@ -301,6 +303,7 @@ const components = [
         RemoteService,
         HierarchicalRemoteService,
         GridBaseAPIService,
+        PagingPipe,
         IgxGridHierarchicalPipe,
         IgxExcelExporterService,
         IgxIconService,
diff --git a/src/app/grid-events/grid-events.component.html b/src/app/grid-events/grid-events.component.html
index 7604bf60cbb..ae4fedb6b59 100644
--- a/src/app/grid-events/grid-events.component.html
+++ b/src/app/grid-events/grid-events.component.html
@@ -2,8 +2,7 @@
     <igx-switch (change)='this.$sorting = !this.$sorting' style="padding-left: 20px">cancel sorting</igx-switch>
     <igx-switch (change)='this.$filtering = !this.$filtering' style="padding-left: 20px">cancel filtering</igx-switch>
     <igx-switch (change)='this.$pinning = !this.$pinning' style="padding-left: 20px">cancel pinning</igx-switch>
-    <igx-switch (change)='this.$resizing = !this.$resizing' style="padding-left: 20px">cancel resizing</igx-switch>
-    <igx-switch (change)='this.$onColumnSelectionChange = !this.$onColumnSelectionChange' style="padding-left: 20px">cancel onColumnSelectionChange</igx-switch>
+    <igx-switch (change)='this.$paging = !this.$paging' style="padding-left: 20px">cancel paging</igx-switch>
     <igx-switch (change)='this.$hiding = !this.$hiding' style="padding-left: 20px">cancel hiding</igx-switch>
 </div>
 <igx-input-group>
@@ -20,11 +19,11 @@
             <button (click)="addFormatter()">Use formatter function for OrderDate col</button> -->
             <igx-grid #grid1
                 width="900px" height="550px"
-                [data]="localData"
+                [data]="localData | pagingPipe:page:perPage"
                 displayDensity="compact"
                 [primaryKey]="'ProductID'"
                 [allowFiltering]="true" [filterMode]="'excelStyleFilter'"
-                [paging]="true"
+                [paging]="true" [paginationTemplate]="customPager"
                 columnSelection="single"
                 (onColumnMovingStart)="onColumnMovingStart($event)"
                 (onColumnMoving)="onColumnMoving($event)"
@@ -33,7 +32,6 @@
                 (onSortingDone)="onSortingDone($event)"
                 (filtering)="onFiltering($event)"
                 (onFilteringDone)="onFilteringDone($event)"
-                (onPagingDone)="onPagingDone($event)"
                 (onColumnPinning)="onColumnPinning($event)"
                 (columnPinned)="columnPinned($event)"
                 (columnVisibilityChanging)="columnVisibilityChanging($event)"
@@ -77,3 +75,15 @@
         </div>
     </div>
 </div>
+
+<ng-template #customPager let-api>
+    <igx-paginator #paginator
+        [totalRecords]="totalCount"
+        [(page)]="page"
+        [(perPage)]="perPage"
+        [selectOptions]="selectOptions"
+        [displayDensity]="grid1.displayDensity"
+        (paging)="paging($event)"
+        (pagingDone)="pagingDone($event)">
+    </igx-paginator>
+</ng-template>
diff --git a/src/app/grid-events/grid-events.component.ts b/src/app/grid-events/grid-events.component.ts
index 7b7dcf95034..d106cd84438 100644
--- a/src/app/grid-events/grid-events.component.ts
+++ b/src/app/grid-events/grid-events.component.ts
@@ -1,10 +1,12 @@
-import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';
+import { Component, ViewChild, ElementRef, Renderer2, OnInit } from '@angular/core';
 import { IgxGridComponent, FilteringExpressionsTree,
     ISortingExpression, IPinColumnEventArgs, IColumnVisibilityChangedEventArgs,
-    IColumnResizeEventArgs, IColumnSelectionEventArgs, IPageEventArgs, ISortingEventArgs,
+    IColumnResizeEventArgs, IColumnSelectionEventArgs, ISortingEventArgs,
     IFilteringEventArgs, IgxStringFilteringOperand, IColumnMovingEndEventArgs,
     IColumnMovingEventArgs, IColumnMovingStartEventArgs, IPinColumnCancellableEventArgs,
-    IColumnVisibilityChangingEventArgs } from 'igniteui-angular';
+    IColumnVisibilityChangingEventArgs,
+    IgxPaginatorComponent} from 'igniteui-angular';
+import { IPagingDoneEventArgs, IPagingEventArgs } from 'projects/igniteui-angular/src/lib/paginator/interfaces';
 import { data } from '../grid-cellEditing/data';
 
 @Component({
@@ -12,9 +14,10 @@ import { data } from '../grid-cellEditing/data';
     styleUrls: ['grid-events.component.scss'],
     templateUrl: 'grid-events.component.html'
 })
-export class GridEventsComponent {
+export class GridEventsComponent implements OnInit {
 
     @ViewChild('grid1', { read: IgxGridComponent, static: true }) public grid: IgxGridComponent;
+    @ViewChild(IgxPaginatorComponent) public paginator: IgxPaginatorComponent;
     @ViewChild('logger') public logger: ElementRef;
 
     public $sorting = false;
@@ -26,9 +29,16 @@ export class GridEventsComponent {
     public $hiding = false;
     public $moving = false;
     public localData: any[];
+    public page = 1;
+    public perPage = 7;
+    public selectOptions = [5, 10, 15];
+    public totalCount = 10;
 
-    constructor(private renderer: Renderer2) {
+    constructor(private renderer: Renderer2) { }
+
+    public ngOnInit() {
         this.localData = data;
+        this.totalCount = data.length;
     }
 
     public filter(term) {
@@ -40,7 +50,6 @@ export class GridEventsComponent {
     }
 
     public onColumnMovingStart(event: IColumnMovingStartEventArgs) {
-        console.log('event' + event);
         this.logAnEvent('=> onColumnMovingStart');
     }
     public onColumnMoving(event: IColumnMovingEventArgs) {
@@ -48,7 +57,6 @@ export class GridEventsComponent {
         this.logAnEvent(event.cancel ? '=> onColumnMoving cancelled' : '=> onColumnMoving');
     }
     public onColumnMovingEnd(event: IColumnMovingEndEventArgs) {
-        console.log('event' + event);
         this.logAnEvent('=> onColumnMovingEnd');
     }
 
@@ -57,7 +65,6 @@ export class GridEventsComponent {
         this.logAnEvent('=> sorting', event.cancel);
     }
     public onSortingDone(event: ISortingExpression) {
-        console.log('event' + event);
         this.logAnEvent(`=> onSortingDone`);
     }
 
@@ -66,12 +73,16 @@ export class GridEventsComponent {
         this.logAnEvent('=> filtering', event.cancel);
     }
     public onFilteringDone(event: FilteringExpressionsTree) {
-        console.log('event' + event);
         this.logAnEvent(`=> onFilteringDone`);
     }
-    public onPagingDone(event: IPageEventArgs) {
-        console.log('event' + event);
-        this.logAnEvent(`=> onPagingDone`);
+
+    public paging(event: IPagingEventArgs) {
+        event.cancel = this.$paging;
+        this.logAnEvent(`=> paging`, event.cancel);
+    }
+    public pagingDone(event: IPagingDoneEventArgs) {
+        this.logAnEvent(`=> pagingDone`);
+        this.paginator.paginate(event.newPage);
     }
 
     public onColumnPinning(event: IPinColumnCancellableEventArgs) {
@@ -79,7 +90,6 @@ export class GridEventsComponent {
         this.logAnEvent('=> onColumnPinning', event.cancel);
     }
     public columnPinned(event: IPinColumnEventArgs) {
-        console.log('event' + event);
         this.logAnEvent(`=> columnPinned`);
     }
 
@@ -92,7 +102,6 @@ export class GridEventsComponent {
     }
 
     public onColumnResized(event: IColumnResizeEventArgs) {
-        console.log('event' + event);
         this.logAnEvent(`=> onColumnResized`);
     }
 
diff --git a/src/app/grid-events/pagingPipe.ts b/src/app/grid-events/pagingPipe.ts
new file mode 100644
index 00000000000..a784a075709
--- /dev/null
+++ b/src/app/grid-events/pagingPipe.ts
@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DataUtil } from 'igniteui-angular';
+
+@Pipe({
+    name: 'pagingPipe',
+    pure: true
+})
+export class PagingPipe implements PipeTransform {
+
+    public transform(collection: any[], page = 0, perPage = 15): any[] {
+        const state = {
+            index: page,
+            recordsPerPage: perPage
+        };
+        const total = collection.length;
+        const result = DataUtil.page(collection, state, total);
+        return result;
+    }
+}