title: How to refresh data from view without refreshing the whole page? angular
body: <p>I'am fairly new to angular 4 and I'm trying to make a website that can show users logs. My problem is how can I get new data from database and show it to my angular page without refreshing the  page. My friends told me to use ajax, are there any built in solution in angular that can solve my problem? This is my code on the service</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import {Http,Headers} from '@angular/http';
  import *  as _ from 'underscore';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/do';
  import 'rxjs/add/operator/toPromise';
  import {tokenNotExpired} from 'angular2-jwt';
  
  
  @Injectable()
  export class PagerService {
  
      authToken:any;
    constructor(private http:Http) { }
  
    getzip(){
      //gets all the data that matches the users zipcode
          var headers = new Headers();
          this.loadToken();//access token
          headers.append('Authorization',this.authToken);
          headers.append('Content-type','application/json');
          return this.http.get('http://localhost:3000/logs/getByName',{headers:headers})
          .toPromise().then((res) =&gt; res.json());
      }
  
  
     loadToken(){
  
          var token = localStorage.getItem('id_token');
          this.authToken = token;
          //this.user = user;
      }
  
  getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {
          // calculate total pages
          let totalPages = Math.ceil(totalItems / pageSize);
  
          let startPage: number, endPage: number;
          if (totalPages &lt;= 10) {
              // less than 10 total pages so show all
              startPage = 1;
              endPage = totalPages;
          } else {
              // more than 10 total pages so calculate start and end pages
              if (currentPage &lt;= 6) {
                  startPage = 1;
                  endPage = 10;
              } else if (currentPage + 4 &gt;= totalPages) {
                  startPage = totalPages - 9;
                  endPage = totalPages;
              } else {
                  startPage = currentPage - 5;
                  endPage = currentPage + 4;
              }
          }
  
          // calculate start and end item indexes
          let startIndex = (currentPage - 1) * pageSize;
          let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
  
          // create an array of pages to ng-repeat in the pager control
          let pages = _.range(startPage, endPage + 1);
  
          // return object with all pager properties required by the view
          return {
              totalItems: totalItems,
              currentPage: currentPage,
              pageSize: pageSize,
              totalPages: totalPages,
              startPage: startPage,
              endPage: endPage,
              startIndex: startIndex,
              endIndex: endIndex,
              pages: pages
          };
      }
  }
  </code></pre>
  
  <p>And this is my component.ts</p>
  
  <pre><code>    import { Component, OnInit } from '@angular/core';
      import {PagerService} from '../../service/pager.service';
      import {Router} from '@angular/router';
      import { Observable } from 'rxjs/Observable';
      import { Http, Headers, RequestOptions, Response } from '@angular/http';
      import *  as _ from 'underscore';
  
  
      @Component({
        selector: 'app-messages',
        templateUrl: './messages.component.html',
        styleUrls: ['./messages.component.css']
      })
      export class MessagesComponent implements OnInit {
  
  
  
        constructor(private pagerService:PagerService,
                    private router:Router,
                    private http:Http
                  ) { }
  
          doc:any[];
          // array of all items to be paged
          private allItems: any[];
  
          // pager object
          pager: any = {};
  
          // paged items
          pagedItems: any[];
  
          row:any;
  
        ngOnInit() {
           this.pagerService.getzip().then(data =&gt;{
           this.allItems = data;this.setPage(1);
           console.log(JSON.stringify(this.allItems.length),"MESSAGES")
      },err=&gt;{console.log(err); return false;});
        }
      setPage(page: number) {
              if (page &lt; 1 || page &gt; this.pager.totalPages) {
                  return;
              }
              // get pager object from service
              this.pager = this.pagerService.getPager(this.allItems.length, page);
              // get current page of items
              this.pagedItems = this.allItems.slice(this.pager.startIndex, this.pager.endIndex + 1);
              console.log(this.pager.startIndex,this.pager.endIndex)
  
            }
  
  
  
      }
  </code></pre>
  
  <p>And this if my view:</p>
  
  <pre><code>&lt;div *ngIf="allItems &amp;&amp; allItems.length &lt;= 0" class="alert alert-dismissible alert-success"&gt;
    &lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;
    &lt;strong&gt;Well done!&lt;/strong&gt; There no currently &lt;a href="#" class="alert-link"&gt;messages to display&lt;/a&gt;.
  &lt;/div&gt;
  
  &lt;div *ngIf="allItems &amp;&amp; allItems.length &gt; 0"&gt;
  &lt;table class="table table-striped table-hover "&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;Plate Number&lt;/th&gt;
        &lt;th&gt;Date&lt;/th&gt;
        &lt;th&gt;Time&lt;/th&gt;
        &lt;th&gt;Location&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody &gt;
      &lt;tr *ngFor ="let x of pagedItems;let i = index"&gt;
        &lt;td&gt;{{i+(pager.startIndex+1)}}&lt;/td&gt;
        &lt;td&gt;{{x.platenumber}}&lt;/td&gt;
        &lt;td&gt;{{x.date.month}}-{{x.date.dayN}}-{{x.date.year}}&lt;/td&gt;
        &lt;td&gt;{{x.time}}&lt;/td&gt;
        &lt;td&gt;{{x.location.street}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;div class = "text-center"&gt;
  &lt;!-- pager --&gt;
              &lt;ul *ngIf="pager.pages &amp;&amp; pager.pages.length" class="pagination"&gt;
                  &lt;li [ngClass]="{disabled:pager.currentPage === 1}"&gt;
                      &lt;a (click)="setPage(1)"&gt;First&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li [ngClass]="{disabled:pager.currentPage === 1}"&gt;
                      &lt;a (click)="setPage(pager.currentPage - 1)"&gt;Previous&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}"&gt;
                      &lt;a (click)="setPage(page)"&gt;{{page}}&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li [ngClass]="{disabled:pager.currentPage === pager.totalPages}"&gt;
                      &lt;a (click)="setPage(pager.currentPage + 1)"&gt;Next&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li [ngClass]="{disabled:pager.currentPage === pager.totalPages}"&gt;
                      &lt;a (click)="setPage(pager.totalPages)"&gt;Last&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>