Client side pagination with slice pipe

1)app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NumberListComponent} from './number-list.component';
@NgModule({
  imports: [BrowserModule],
  declarations: [NumberListComponent],
  bootstrap: [NumberListComponent]
})
export class AppModule { }

2)number-list.template.html

<div class="container-fluid">
  <h1>My Numbers</h1>
  <span *ngFor="let num of numbers | slice:start:end"
    class="number">
    {{num}}
  </span>
  <button (click)="previous();" [disabled]="start-1<1"><<</button>
  <button (click)="next();" [disabled]="end+1>100">>></button>
</div>

3)number-list.component.ts

import {Component} from '@angular/core';
@Component({
  selector: 'project',
  templateUrl: 'number-list.template.html',
  styles: [`
    .number {
      display: inline-block;
      background: #e0e0e0;
      border-radius: 4px;
      margin: 4px;
      padding: 4px 8px;
    }
  `]
})
export class NumberListComponent {
  numbers: number[] = [];
  start = 1;
  end = 11;
  pageSize=10;
  constructor() {
    for (let i = 0; i < 100; i++) {
      this.numbers.push(i);
    }
  }
  toValue(input: string, defValue) {
    var value = parseInt(input);
    if (isNaN(value)) {
      return defValue;
    }
    else {
      return value;
    }
  }
  previous(){
    this.start = this.start - this.pageSize;
    this.end = this.end - this.pageSize;
  }
  next(){
    this.start = this.start + this.pageSize;
    this.end = this.end + this.pageSize;
  }
}