Создать свой пагинатор на ангурял4

@Component({
    selector: 'app-some-component',
    template: `
        <div *ngFor="let data of pagedData">
            {{ data }}
        </div>
        <div *ngFor="let page of pages" (click)="paginate(page)" [class.active]="page === activePage">
            {{ page }}
        </div>
    `
})
export class SomeComponent {
    // Оригинальные данные, могут быть получены через API
    // Immutable
    public data: any[] = [];
    // Кол-во элементов на страницу
    public itemsPerPage = 10;
    // Кол-во страниц
    public pagesCount = Math.ceil(this.data.length / this.itemsPerPage);
    // Создаем численный массив, основанный на количестве страниц
    // если `pageCount = 5`, то `pages = [1, 2, 3, 4, 5]` и тд.
    public pages: number[] = Array.from({
        length: this.pagesCount
    }).map((_, i) => i += 1);
    // Пагинированные данные
    public pagedData: any[] = this.data.slice(0, this.itemsPerPage);
    // Текущая выбранная страница
    public activePage = 1;
    public paginate(page: number): void {
        // Если юзер кликнул на ту же страницу - выходим из функции
        if (this.activePage === page) {
            return;
        }
        this.activePage = page;
        this.pagedData = this.data.slice(this.itemsPerPage * page - this.itemsPerPage, this.itemsPerPage * page);
    }
}