Ocena i poprawa kodu Paginacji

Cześć. Stworzyłęm paginację co o niej sądzicie co mogę poprawić ?

import { Component, OnInit } from '@angular/core';
import { TenureService } from '../tenure-dialog/tenure.service';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-tenure-list',
  templateUrl: './tenure-list.component.html',
  styleUrls: ['./tenure-list.component.scss']
})
export class TenureListComponent implements OnInit {

  data: any;
  totalPages: number;
  startPage: number;
  endPage: number;
  input = [];
  currentPage: number;
  pageNumber: number;

  constructor(private service: TenureService, private http: HttpClient, private route: ActivatedRoute, private router: Router) { 
    route.params.subscribe(val => {
      const page =  this.route.snapshot.paramMap.get('page');
      this.http.get(`https://localhost:44333/Tenure/GetAll/${page}`).subscribe((x:any)=> {
        this.data = x.payload;
        this.totalPages = x.totalPages;
        this.startPage = x.startPage;
        this.endPage = x.endPage;
        this.currentPage = x.currentPage;

        this.input = [];
  
        for(var i = this.startPage; i<=this.endPage; i++) {
          this.input.push(i);
        }
  
        console.log(page);
        console.log(this.input);
      });
      return this.data;
    });
  }


  ngOnInit() {

  }

  changePage(page) {
    
    this.router.navigate([`/GetAll/${page}`]);
  }
}

<div *ngFor="let item of data">
    <p>{{item.name}}</p>
    <img [src]="item.imageUrl" alt="">
</div>

<div>
    <ul *ngIf="totalPages <=7">
        <li *ngFor="let item of  input" ><a [routerLink]="['/GetAll', item]" [ngClass]="(currentPage==item)?'deactive': 'active'" (click)="changePage(item)" >{{item}}</a></li> 
    </ul>
    <ul *ngIf="totalPages > 7">
        <span *ngIf="startPage > 1">
            <li><a [routerLink]="['/GetAll', 1]" [ngClass]="(currentPage==1)?'deactive': 'active'" (click)="changePage(1)">1</a></li>
        </span>
        <span *ngIf="startPage > 2">
            <li>...</li>
        </span>
        <li  *ngFor="let item of input"><a [routerLink]="['/GetAll', item]" [ngClass]="(currentPage==item)?'deactive': 'active'" (click)="changePage(item)">{{item}}</a></li>
        <span *ngIf="endPage < (totalPages-1)">
            <li>...</li>
        </span>
        <span *ngIf="endPage < totalPages">
            <li ><a [routerLink]="['/GetAll', totalPages]" [ngClass]="(currentPage==totalPages)?'deactive': 'active'" (click)="changePage(totalPages)">{{totalPages}}</a></li>
        </span>
    </ul>
</div>