title: How pagination works in api system (frontend is angular2 and backend is laravel5.4)?
body: <p>I have a project for hotel bookings, frontend is created using angular2 and backend is created using laravel, It is an API system. I have a table listing in angular2. For that, I have fetched bookings data from laravel and binded inside angular table but I don't know how pagination works through api. Initially I fetched and binded only 15 data. How can access more data when we click on next page. Here is the code for laravel angular.</p>
  
  <p><strong>Laravel</strong></p>
  
  <pre><code>public function index()
  {
     $bookings = Booking::where('is_delete', 0)
              -&gt;paginate(15);
  
     return response()-&gt;json(['bookingDetails' =&gt; $bookings], 200);
  }
  </code></pre>
  
  <p><strong>Angular2</strong></p>
  
  <p><strong>booking.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Headers, Http, Response } from '@angular/http';
  
  import { Bookings } from './booking';
  
  import 'rxjs/add/operator/toPromise';
  import 'rxjs/add/operator/map';
  import 'rxjs/Rx';
  import { Observable } from "rxjs";
  
  @Injectable()
  export class BookingService {
      private headers = new Headers({'Content-Type': 'application/json'});
      private _url: string = 'http://cabinapi.app/api/bookings/';
      /*private _url: string = 'apidata/testData.json';*/
      constructor(private http: Http) { }
  
      getBooking(): Observable&lt;any&gt; {
          return this.http.get(this._url)
              .map((response: Response) =&gt; response.json().bookingDetails.data as Bookings[])
              .catch(this.handleError);
      }
      private handleError(error: any): Promise&lt;any&gt; {
          console.error('An error occurred', error); // for demo purposes only
          return Promise.reject(error.message || error);
      }
  }
  </code></pre>
  
  <p><strong>booking.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  import { BookingService } from './booking.service';
  import { Bookings } from './booking';
  @Component({
      selector: 'booking',
      templateUrl: './booking.component.html'
  })
  export class BookingComponent implements OnInit {
      bookings: Bookings[];
      constructor(private employeeService: BookingService) {}
      getBooking(): void {
          /*this.employeeService.getEmployee().then(employees =&gt; this.employees = employees);*/
          this.employeeService.getBooking().subscribe(bookings =&gt; this.bookings = bookings);
      }
      ngOnInit(): void {
          this.getBooking();
          setTimeout(function () {
              $(function() {
                  $("#dataTable").DataTable();
              });
          }, 1000);
      }
  }
  </code></pre>