title: Angular 8 Pagination with Data from Database --
body: <p>I am having a little trouble with this one.
  Using the approach discussed in this -- <a href="https://jasonwatmore.com/post/2019/06/18/angular-8-simple-pagination-example" rel="nofollow noreferrer">https://jasonwatmore.com/post/2019/06/18/angular-8-simple-pagination-example</a></p>
  
  <p>Use-case difference is, my data all comes from database. So I have had to use a model class and all. But, due to some problem, I am getting the same data [1st row from db] in all the rows. Let me post the code I used --</p>
  
  <p>ANGULAR</p>
  
  <ol>
  <li><p>method inside my component to get data from service class</p>
  
  <pre><code>newsTopics: NewsTopic[];
  pageOfItems: Array&lt;NewsTopic&gt;;
  
  getAllNewsTopics() {
  
  this.userService.getAllTopics()
    .subscribe((data: NewsTopic[]) =&gt; {
      this.newsTopics = (data as NewsTopic[]).map((x, i) =&gt; ({ Id: (i + 1), TopicId: data[0].TopicId, TopicName: data[0].TopicName, TopicInfo: data[0].TopicInfo, IssueStartDate: data[0].IssueStartDate, IssueCloseDate: data[0].IssueCloseDate, NewsCategory_Id: 0 }));
    })
    }
  </code></pre></li>
  <li><p>my model class</p>
  
  <pre><code>export class NewsTopic
  {
     Id: number;
     TopicId: string;
     TopicName: string;
     TopicInfo: string;
     IssueStartDate: Date;
     IssueCloseDate: Date;
     NewsCategory_Id: number;
  }
  </code></pre></li>
  <li><p>the method in service class itself</p>
  
  <pre><code>getAllTopics(){
  
      var reqHeader = new HttpHeaders({ 'No-Auth': 'True' });
      return this.http.get&lt;NewsTopic[]&gt;(this.rootUrl + '/api/NewsTopic/GetAllNewsTopics', { headers: reqHeader });
    }
  </code></pre></li>
  <li><p>my html for showing the data and the pagination control</p>
  
  <pre><code>&lt;div class="card-body"&gt;
              &lt;table class="table table-striped" id="newstopics_tbl"&gt;
              &lt;thead&gt;
                &lt;tr style="background:linear-gradient(50deg, #d9fcfc, #dafbde)"&gt;
                  &lt;th&gt;Topic ID&lt;/th&gt;
                  &lt;th&gt;Topic Name&lt;/th&gt;
                  &lt;th&gt;Topic Info&lt;/th&gt;
                  &lt;th&gt;Start Date&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr *ngFor="let nt of pageOfItems"&gt;
                  &lt;td&gt;&lt;b&gt;{{nt.TopicId}}&lt;/b&gt;&lt;/td&gt;
                  &lt;td&gt;{{nt.TopicName}}&lt;/td&gt;
                  &lt;td&gt;{{nt.TopicInfo}}&lt;/td&gt;
                  &lt;td&gt;{{nt.IssueStartDate}}&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
            &lt;/div&gt;
            &lt;div class="card-footer pb-0 pt-3" style="background:linear-gradient(50deg, #d9fcfc, #dafbde); margin-top:15px"&gt;
              &lt;jw-pagination [items]="newsTopics" (changePage)="onChangePage($event)"&gt;&lt;/jw-pagination&gt;
            &lt;/div&gt;
  </code></pre></li>
  </ol>
  
  <p>My guess is, the problem lies in the getAllNewsTopics() method, where I am trying to fill and map the array of objects and assign to the variable. Something wrong there. If you see the original example from the link, they used a .fill(0) also. In my case I tried doing .fill(data[0]) however result is the same, ie. only first record, repeated multiple times.
  What is the trick I am missing? Can someone just point me out.
  Much needed, Thanks,</p>
  
  <p>EDITS --</p>
  
  <p>These are the changes-></p>
  
  <pre><code>getAllNewsTopics() {
  
      var reqHeader = new HttpHeaders({ 'No-Auth': 'True' });
      return this.http.get&lt;NewsTopic[]&gt;(this.rootUrl + '/api/NewsTopic/GetAllNewsTopics', { headers: reqHeader })
        .subscribe((data: NewsTopic[]) =&gt; {
          this.newsTopics = data;
  
      });
  
  
    }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;div class="card-body"&gt;
              &lt;table class="table table-striped" id="newstopics_tbl"&gt;
              &lt;thead&gt;
                &lt;tr style="background:linear-gradient(50deg, #d9fcfc, #dafbde)"&gt;
                  &lt;th&gt;Topic ID&lt;/th&gt;
                  &lt;th&gt;Topic Name&lt;/th&gt;
                  &lt;th&gt;Topic Info&lt;/th&gt;
                  &lt;th&gt;Start Date&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr *ngFor="let nt of pageOfItems" style="cursor:pointer" (click)="NewsArticleAdd(nt)"&gt;
                  &lt;td (click)=""&gt;&lt;b&gt;{{nt.TopicId}}&lt;/b&gt;&lt;/td&gt;
                  &lt;td style="color:mediumvioletred;" (click)=""&gt;{{nt.TopicName}}&lt;/td&gt;
                  &lt;td (click)=""&gt;{{nt.TopicInfo}}&lt;/td&gt;
                  &lt;td (click)=""&gt;{{nt.IssueStartDate}}&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
            &lt;/div&gt;
            &lt;div class="card-footer pb-0 pt-3" style="background:linear-gradient(50deg, #d9fcfc, #dafbde); margin-top:15px"&gt;
              &lt;jw-pagination [items]="newsTopics" (changePage)="onChangePage($event)"&gt;&lt;/jw-pagination&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>That does the trick. Works as expected,</p>