[app.component.html]
<ejs-grid #grid [dataSource]='data' [allowPaging]="true" [pageSettings]="pageSettings" height='350'
(dataBound)="dataBound($event)">
----
</ejs-grid>
[app.component.ts]
export class AppComponent {
@ViewChild('grid', { static: true })
public grid: GridComponent;
----
dataBound(args) {
if (!this.grid.element.querySelector('.custompageelm')) {
// create the custom element
var custompageelm = document.createElement('div');
custompageelm.classList.add('custompageelm');
var button1 = document.createElement('button');
button1.innerText = 'Button1';
button1.addEventListener('click', this.btn1Click.bind(this));
var button2 = document.createElement('button');
button2.innerText = 'Button2';
button2.addEventListener('click', this.btn2Click.bind(this));
custompageelm.appendChild(button1);
custompageelm.appendChild(button2);
// append the custom element into the grid pager
this.grid.element.querySelector('.e-gridpager').appendChild(custompageelm);
}
}
btn1Click(args) {
alert('do your operation for button1');
}
btn2Click(args) {
alert('do your operation for button2');
}
}
[app.component.css]
.e-grid .e-gridpager div.custompageelm {
display: inline-block;
margin: 0 0 8px 12px;
overflow: hidden;
}
.e-grid .e-gridpager div.custompageelm button {
display: inline-block;
margin: 0 5px;
}
| 
