title: How to add pagination in Angular 4 for a table?
body: <p>I am new to Angular 4 and I would appreciate if somebody could tell me how I can add pagination in a table.
  Below is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div *ngIf="tableDiv &amp;&amp; adv1" id="adv1Div"&gt;
              &lt;table class="table table-hover" id="adv1Table"&gt;
                  &lt;thead&gt;
                      &lt;tr class="black-muted-bg" &gt;
                          &lt;th class="align-right" *ngFor="let data of calendarTable[0].weeks"&gt;{{data.period}}&lt;/th&gt;
  
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr class="no-top-border" *ngFor="let item of calendarTable| paginate: { itemsPerPage: 9, currentPage: p };"&gt;
                          &lt;td contenteditable='true' *ngFor="let data of item.weeks| paginate: { itemsPerPage: 9, currentPage: p };" class="align-right"&gt;{{data.price}}&lt;/td&gt;   
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
                  &lt;a href="javascript:void(0)"&gt;
                      {{p}}
                    &lt;/a&gt;
  
              &lt;/table&gt;
  
          &lt;/div&gt;         
  </code></pre>
  
  <p>And my JSON is :</p>
  
  <pre><code> public calendarTable = [
        { name: "TV AD1", 
            weeks: [
            { period: "2/10/2017", price: "400" },
            { period: "9/10/2017", price: "800" },
            { period: "16/10/2017", price: "200" },
            { period: "23/10/2017", price: "500" },
            { period: "30/10/2017", price: "600" },
            { period: "6/11/2017", price: "800" },
            { period: "13/11/2017", price: "700" },
            { period: "20/11/2017", price: "800" },
            { period: "27/11/2017", price: "900" },
            { period: "4/12/2017", price: "400" },
            { period: "11/12/2017", price: "800" },
            { period: "18/12/2017", price: "200" },
            { period: "25/12/2017", price: "500" },
            { period: "1/1/2018", price: "600" },
            { period: "8/1/2018", price: "800" },
            { period: "15/1/2018", price: "700" },
            { period: "22/1/2018", price: "800" },
            { period: "29/1/2018", price: "900" }
            ]
  
            }
     ]
  </code></pre>
  
  <p>I want to add 5 items per page in a table. Please help me in this regard.</p>