title: Creating server side pagination with ng2-smart-table in Angular 6
body: <p>I am trying to use the component <a href="https://github.com/akveo/ng2-smart-table" rel="nofollow noreferrer"><code>&lt;ng2-smart-table&gt;</code></a>. I actually did it, but I need to refresh the data after the user click in a page or in a column for sorting, is there any way to capture those events and refresh the data?</p>
  
  <p>table.component.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ng2-smart-table 
  [settings]="settings" 
  [source]="characters"&gt;
  &lt;/ng2-smart-table&gt;
  </code></pre>
  
  <p>table.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Injectable()
  export class TableService {
    constructor(private http: HttpClient) { }
    url = 'http://localhost:4000';
    getCharacters() {
      return this
              .http
              .get(`${this.url}/characters`);
    }
  }
  </code></pre>
  
  <p>table.interface.ts</p>
  
  <pre><code>export interface Table {
     ticket: String;
     title: String;
     state: String;
     owner: String;
     age: String;
     priority: String;
  }
  </code></pre>
  
  <p>table.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { TableService } from './table.service';
  import { Table } from './table.interface';
  import { Observable } from 'rxjs';
  
  @Component({
    selector: 'app-table',
    templateUrl: './table.component.html',
    styleUrls: ['./table.component.scss']
  })
  export class TableComponent implements OnInit {
  
    characters: Table[];
    settings = {
          columns: {
            ticket: {
              title: 'Ticket',
              filter: false
            },
            title: {
              title: 'Title',
              filter: false
            },
            state: {
              title: 'State',
              filter: false
            },
            owner:{
              title: 'Owner',
              filter: false
            },
            age:{
              title: 'Age',
              filter: false
            },
            priority:{
              title: 'Priority',
              filter: false
            }
          },
          actions:{
            columnTitle: '',
            add: false,
            edit: false,
            delete: false
          }
    };    
  
    constructor(private tservice: TableService) { }
  
    ngOnInit() {
        this
          .tservice
          .getCharacters()
          .subscribe((data: Table[]) =&gt; {
            this.characters = data;
        });
    }
  }
  </code></pre>
  
  <p>parent.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { TableComponent } from '../../utils/table/table.component';
  
  @Component({
    selector: 'app-ticket-item-list',
    templateUrl: './ticket-item-list.component.html',
    styleUrls: ['./ticket-item-list.component.scss']
  })
  export class TicketItemListComponent implements OnInit {
  
    pagination = {
      TotalItems: 100,
      CurrentPage: 1,
      PageSize: 10,
      TotalPageLinkButtons: 5,
      RowsPerPageOptions: [10, 20, 30, 50, 100]
    };
  
    /* Paging Component metod */
    myChanges(event) {
      this.pagination.CurrentPage = event.currentPage;
      this.pagination.TotalItems = event.totalItems;
      this.pagination.PageSize = event.pageSize;
      this.pagination.TotalPageLinkButtons = event.totalPageLinkButtons;
    }
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>parent.component.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;app-table&gt;&lt;/app-table&gt;
  </code></pre>