Angular 5 custom pagination with Laravel 5

I wants to create a custom pagination in Angular 5 which is supporting by Laravel 5 as back end. My intention is if there is 7 pages then the pagination will look like : 1 | 2 | 3 | 4 | 5; if users click on the 3, the pagination will look like 3 | 4 | 5 | 6 | 7 etc. To achieve this, I have created a custom pagination in my product.component.ts as follows:

 createRange(number, current_page){
    console.log('current page='+current_page);

    var items: number[] = [];
    for(var i = current_page; i <= current_page + 2; i++){
       items.push(i);
    }
    //console.log(JSON.stringify(items));
    return items;
  }


directPage(url, pathNo) { //console.log(url);
  var link_path = url+"?page="+pathNo;
  this.productService.getURLpage(link_path).subscribe(data => {
        this.products = data.products.data;
        this.products_paging = data.products;

        });
  }

In product.component.html, I have the following code:

<ng-template ngFor let-item [ngForOf]="createRange(5, products_paging.current_page)" let-currentElementIndex="index+1">
  <button (click)="directPage(products_paging.path, currentElementIndex)"></button>
</ng-template>

The pagination is working /changing data based on the buttons in the pagination I selected however, the pagination numbers are not changing itself like it keep the buttons like 1 | 2 | 3 | 4 | 5. My question is - how can I change the pagination buttons (numbers) if I select any number from there? Let me know if this clears, otherwise I will update my question for more clear.

via Chebli Mohamed