AndrewJBateman/ionic-angular-news

:clipboard: App to show news from an API using Angular and Ionic

⚡ Ionic Angular News

• 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

📄 Table of contents

• ⚡ Ionic Angular News
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status
  • 📋 To-do
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• The News API is a simple HTTP REST API for searching and retrieving live articles from the web using:

1. Keyword or phrase
2. Date published
3. Source name
4. Source domain name
5. Language

📷 Screenshots

📶 Technologies

• 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

💾 Setup

• 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'

💻 Code Examples

• 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");
}

🆒 Features

• 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 & To-do list

• Status: Working.
• To-do: This app could be improved - e.g. add newsArticle interface. An improved news app exists in another repo.

👏 Inspiration

• 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.

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com