title: Angular 2 application with refreshing data in real time
body: <p>I am using angular4.</p>
  
  <p>I am trying to Real time update using observable.</p>
  
  <p>Here is my code</p>
  
  <p>First i import <code>observable</code></p>
  
  <pre><code> import { Observable } from 'rxjs/Rx';
      import { AnonymousSubscription } from "rxjs/Subscription";
      import { ApiServiceProvider } from '../../providers/api-service/api-service';
  
      constructor(public apiService:ApiServiceProvider){} 
      ngOnInit(){
          this.getAllNeighbours();
      }
      getAllNeighbours(){
      //Get Apartment User
      this.addNeighbours=[];
      this.postsSubscription=this.apiService.getApartmentUser(this.currentUserApartId).subscribe(users=&gt;{
          var apartmentUsers=users.json();
          this.subscribeToData();
  
          //Get Apartments flats
          this.apiService.getApartmentFlats(this.currentUserApartId).subscribe(flats=&gt;{
              var apartmentFlats=flats.json();
              for(var i in apartmentFlats){
                  if(apartmentFlats[i].USER_ID.toString() != this.currentUserId.toString()){
                      var filterUser=apartmentUsers.filter(u=&gt;u.id.toString() === apartmentFlats[i].USER_ID.toString());
                      console.log(filterUser);
                      if(filterUser.length != 0)
                          this.addNeighbours.push({
                              username:filterUser[0].FIRST_NAME + filterUser[0].LAST_NAME,
                              flatno:apartmentFlats[i].FLAT_NO,
                              userid:apartmentFlats[i].USER_ID
                          })
                  }
                  if(apartmentFlats[i].TENANT_ID.toString() != this.currentUserId.toString()){
                      var filterUser=apartmentUsers.filter(u=&gt;u.id.toString() === apartmentFlats[i].TENANT_ID.toString());
                      if(filterUser.length != 0)
                          this.addNeighbours.push({
                              username:filterUser[0].FIRST_NAME + filterUser[0].LAST_NAME,
                              flatno:apartmentFlats[i].FLAT_NO,
                              userid:apartmentFlats[i].USER_ID
                          })
                  }
              }
              this.loading=false;
  
          })
      });
    }
  
    subscribeToData(){
      this.timerSubscription = Observable.timer(5000).subscribe(()=&gt;{
          this.getAllNeighbours();
      })
    }
  
    public ngOnDestroy(): void {
      if (this.postsSubscription) {
        this.postsSubscription.unsubscribe();
      }
      if (this.timerSubscription) {
        this.timerSubscription.unsubscribe();
      }
    }
  </code></pre>
  
  <p>First I get Flats list after I get users list.then i combined data and filter and these values are pushed into <code>addNeighbours</code> array.</p>
  
  <p>I am using <code>this.subscribeToData();</code>.Its used for every time called <code>getAllNeighbours()</code> and update to UI.</p>
  
  <p>Everything is worked fine.My UI is every 5 seconds Update.But at the same time My UI is every 5 seconds like blinking.How can i fix this issue.</p>
  
  <p>Kindly advice me,</p>
  
  <p>Thanks.</p>