How to refresh data from view without refreshing the whole page? angular -

i'am new angular 4 , i'm trying make website can show users logs. problem how can new data database , show angular page without refreshing page. friends told me use ajax, there built in solution in angular can solve problem? code on service

import { injectable } '@angular/core'; import {http,headers} '@angular/http'; import *  _ 'underscore'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/do'; import 'rxjs/add/operator/topromise'; import {tokennotexpired} 'angular2-jwt';   @injectable() export class pagerservice {      authtoken:any;   constructor(private http:http) { }    getzip(){     //gets data matches 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) => 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 <= 10) {             // less 10 total pages show             startpage = 1;             endpage = totalpages;         } else {             // more 10 total pages calculate start , end pages             if (currentpage <= 6) {                 startpage = 1;                 endpage = 10;             } else if (currentpage + 4 >= totalpages) {                 startpage = totalpages - 9;                 endpage = totalpages;             } else {                 startpage = currentpage - 5;                 endpage = currentpage + 4;             }         }          // calculate start , end item indexes         let startindex = (currentpage - 1) * pagesize;         let endindex = math.min(startindex + pagesize - 1, totalitems - 1);          // create array of pages ng-repeat in pager control         let pages = _.range(startpage, endpage + 1);          // return object pager properties required view         return {             totalitems: totalitems,             currentpage: currentpage,             pagesize: pagesize,             totalpages: totalpages,             startpage: startpage,             endpage: endpage,             startindex: startindex,             endindex: endindex,             pages: pages         };     } } 

and component.ts

    import { component, oninit } '@angular/core';     import {pagerservice} '../../service/pager.service';     import {router} '@angular/router';     import { observable } 'rxjs/observable';     import { http, headers, requestoptions, response } '@angular/http';     import *  _ '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 items paged         private allitems: any[];          // pager object         pager: = {};          // paged items         pageditems: any[];          row:any;        ngoninit() {          this.pagerservice.getzip().then(data =>{          this.allitems = data;this.setpage(1);          console.log(json.stringify(this.allitems.length),"messages")     },err=>{console.log(err); return false;});       }     setpage(page: number) {             if (page < 1 || page > this.pager.totalpages) {                 return;             }             // pager object service             this.pager = this.pagerservice.getpager(this.allitems.length, page);             // current page of items             this.pageditems = this.allitems.slice(this.pager.startindex, this.pager.endindex + 1);             console.log(this.pager.startindex,this.pager.endindex)            }        } 

and if view:

<div *ngif="allitems && allitems.length <= 0" class="alert alert-dismissible alert-success">   <button type="button" class="close" data-dismiss="alert">&times;</button>   <strong>well done!</strong> there no <a href="#" class="alert-link">messages display</a>. </div>  <div *ngif="allitems && allitems.length > 0"> <table class="table table-striped table-hover ">   <thead>     <tr>       <th></th>       <th>plate number</th>       <th>date</th>       <th>time</th>       <th>location</th>     </tr>   </thead>   <tbody >     <tr *ngfor ="let x of pageditems;let = index">       <td>{{i+(pager.startindex+1)}}</td>       <td>{{x.platenumber}}</td>       <td>{{x.date.month}}-{{x.date.dayn}}-{{x.date.year}}</td>       <td>{{x.time}}</td>       <td>{{x.location.street}}</td>     </tr>   </tbody> </table> </div>  <div class = "text-center"> <!-- pager -->             <ul *ngif="pager.pages && pager.pages.length" class="pagination">                 <li [ngclass]="{disabled:pager.currentpage === 1}">                     <a (click)="setpage(1)">first</a>                 </li>                 <li [ngclass]="{disabled:pager.currentpage === 1}">                     <a (click)="setpage(pager.currentpage - 1)">previous</a>                 </li>                 <li *ngfor="let page of pager.pages" [ngclass]="{active:pager.currentpage === page}">                     <a (click)="setpage(page)">{{page}}</a>                 </li>                 <li [ngclass]="{disabled:pager.currentpage === pager.totalpages}">                     <a (click)="setpage(pager.currentpage + 1)">next</a>                 </li>                 <li [ngclass]="{disabled:pager.currentpage === pager.totalpages}">                     <a (click)="setpage(pager.totalpages)">last</a>                 </li>             </ul> </div> 

in ideal case, there should push notification method setup server side tells client new data available.

if that's not available, can use setinterval() update allitems variable, hold data returned serice. suggest make these adjustments component.ts:

datarefresher: any;  ngoninit() {   this.getdata(true);   this.refreshdata();      }  getdata(setpageflag){   this.pagerservice.getzip().then(data =>{     this.allitems = data;     if(setpageflag){       this.setpage(1);     }     console.log(json.stringify(this.allitems.length),"messages")   },   err => { console.log(err); return false;}); }  refreshdata(){   this.datarefresher =     setinterval(() => {       this.getdata(false);       //passing false flag prevent page reset 1 , hinder user interaction     }, 30000);   } 

refresh time set 30s, change whatever :)

you can add function clear interval , call on ngondestroy:

cancelpagerefresh(){     if(this.datarefresher){         clearinterval(this.datarefresher);     }     }  ngondestroy(){   this.cancelpagerefresh(); } 

if using ondestroy, don't forget import , add in class implementation