Automatically update Angular page on new JSON information - angularjs

Question

I have a news app that calls information from a service. I would like to make it so that, when there is news, this is automatically added to the page.
At first, I was trying to do it by using a this.router.navigate(['/news']) in a setInterval method, but this gives the issue that if I change the page (it's a single page site), the refresh reconnects to the news page.
So, I would need something to either refresh the JSON information, or a way to stop the refresh, the moment I select another page.
The component:
import { Component, OnInit } from '#angular/core';
import { NewsService } from '../services/news.service';
import { Router } from '#angular/router';
#Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit
{
//prop
news: any;
today =
{
releaseDate: Date()
}
//constructor
constructor(private newsService: NewsService, public router: Router)
{
//getdata
this.newsService.getNews().subscribe(response => this.news = response);
}
//methode
Refresh()
{
//redirect
setInterval(() =>
{
this.today.releaseDate = Date();
//this.router.navigate(['/news']);
}, 1000);
}
//lifeCycle
ngOnInit()
{
this.Refresh()
}
}
the service:
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class NewsService
{
//constructor
constructor(private http: Http)
{
}
//methode
getNews()
{
return this.http.get('https://newsapi.org/v1/articles?source=the-next-web&sortBy=latest&apiKey={apikey}').map(response => response.json());
}
and the html:
<div>
<h1 style="display:inline">Latest news</h1>
</div>
<h5 style="float:right">{{today.releaseDate|date:"HH:mm:ss"}}</h5>
<hr/>
<div *ngIf="news">
<div class="newscontainer" *ngFor="let new of news.articles, let i =index">
<div class="newsimage{{i%2}}">
<img src="{{new.urlToImage}}">
</div>
<div class="newstitle">{{new.title}}</div>
<hr />
<div class="releasedate">Release date: {{new.publishedAt|date}} at {{new.publishedAt|date:"HH:mm"}}</div>
Link to Article
<div class="synopsis">{{new.description}}</div>
</div>
</div>