- App to search for and display news items from a news API using the Ionic framework.
- Note: to open web links in a new window use: ctrl+click on link
- The News API is a simple HTTP REST API for searching and retrieving live articles from the web using:
- Keyword or phrase
- Date published
- Source name
- Source domain name
- Language
- Ionic v6
- Ionic/angular v6
- News REST API used to search for news articles - only works in localhost. Paid subscription required if app is deployed
- Add News API key to
environment.ts
- free News API will not work if deployed - To start the server on localhost://8100 type: 'ionic serve'
- Extract from
news.service.ts
that gets data from the API.
getData(url: string): Observable<any> {
try {
return this.http
.get(`${apiUrl}/${url}&apiKey=${apiKey}`)
.pipe(map((res) => res["articles"]));
} catch (error) {
console.log("An error occured while fetching data: ", error);
}
}
- Extract from
news.page.ts
function to get API data Observable with input url'top-headlines?country=gb'
. Instead of using the RxJS async Observable subscribe method, the Angular async pipe now used in the template which unsubscribes itself automatically
ngOnInit(): void {
this.data = this.newsService.getData("top-headlines?country=gb");
}
- Cicking on an item in the news page routes to a news detail page with more information.
- API data service can be modified to search for news in other countries, e.g 'this.data = this.newsService.getData("top-headlines?country=fr")'.
- Status: Working.
- To-do: This app could be improved - e.g. add newsArticle interface. An improved news app exists in another repo.
- Project initially inspired by Baljeet Singh´s Youtube video 'Creating News Application With Ionic 4 and Angular' but much improved upon. I do not recommend this video now - there are much better & more recent Ionic tutorials on Youtube - Simon Grimm or Josh Morony for example.
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email: gomezbateman@yahoo.com