title: Pagination on Angular 6
body: <p>I'm trying to make a table that contains username and achievement. This dynamic data just generated by MySQL that I call with function .subscribe on angular 6. </p>
  
  <p>My problem right now is, How to adding pagination on my data table in order to make a responsive table view.</p>
  
  <p>My page right now :</p>
  
  <p><a href="https://i.stack.imgur.com/WcYfC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WcYfC.png" alt="enter image description here"></a></p>
  
  <p>My dashboard.component.ts</p>
  
  <pre><code>@Component({
    selector: 'app-dashboard',
    templateUrl: './activity-dashboard.component.html',
    styleUrls: ['./activity-dashboard.component.less'],
    encapsulation: ViewEncapsulation.None
  })
  export class ActivityComponent implements OnInit {
    tablePresetColumns;
    tablePresetData;
  
    constructor(
      private activityService: ActivityService,
      private router: Router
    ) {}
  
    public apiData;
  
    ngOnInit() {
      this.activityService.getAchievement().subscribe((res) =&gt; {
        this.apiData = res;
        var ids = [
          ['Username', 1],
          ['Role', 2],
          ['today', 3],
          ['weekly', 4],
          ['monthly', 5],
          ['yearly', 6]
        ];
        const result = Object.keys(res).map(o =&gt; ids.map(
          ([key, id]) =&gt; ({
            id,
            content: res[o][key]
          })));
        this.tablePresetData = result;
      });
    }
  }
  </code></pre>
  
  <p>My dashboard.component.html :</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div eds-tile class="xl-12"&gt;
      &lt;eds-tile-title&gt;User on Shift&lt;/eds-tile-title&gt;
      &lt;eds-tile-actions&gt;&lt;/eds-tile-actions&gt;
      &lt;eds-table [columns]="tablePresetColumns" [data]="tablePresetData" [modes]="['compact', 'dashed']"&gt;&lt;/eds-table&gt;
      &lt;div class="pagination-group"&gt;
        &lt;ul class="pagination"&gt;
          &lt;li class="disabled"&gt;&lt;i class="icon icon-arrow-left"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li class="active"&gt;1&lt;/li&gt;
          &lt;li&gt;2&lt;/li&gt;
          &lt;li&gt;3&lt;/li&gt;
          &lt;li&gt;4&lt;/li&gt;
          &lt;li&gt;5&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;10&lt;/li&gt;
          &lt;li&gt;&lt;i class="icon icon-arrow-right"&gt;&lt;/i&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>so far, I've tried to make the pagination as HTML, but I'm confused to combine my data with pagination function that I will create.</p>
  
  <p>What should I do to make the pagination works as my expectation?</p>