Skip to content

πŸ“‹ Ionic-Angular app to fetch news articles from a REST API using Typescript interfaces to define the expected structure of the json objects returned & http service providers. Custom pipes used to modify API news article titles, contents and convert the Universal Time Constant (UTC) date string. Dark mode, Offline Storage of favourite articles & …

License

Notifications You must be signed in to change notification settings

AndrewJBateman/ionic-angular-news-app

Repository files navigation

⚑ Ionic Angular News App

  • Displays news items from a news API using the Ionic framework.
  • Note: to open web links in a new window use: ctrl+click on link

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

πŸ“„ Table of contents

πŸ“š General info

  • The News API is a simple HTTP REST API for searching and retrieving live articles from the web.
  • The News API now only works on localhost. It will not work when deployed due to CORS errors (error 406) which means they want you to pay a subscription to fully access the API. This app was successfully deployed to Android Studio - see screen shots below but I deleted the firebase depoyment. I will do another news app using the Gnews API which has a free tier for up to 100 requests per day and 10 articles per search.
  • Codium AI used to check and improve code quality.

πŸ“· Screenshots

Ionic page Ionic page Ionic page
News Page French News Page Spanish News Page English
Ionic page Ionic page Ionic page
News Detail Page French News Detail Page Spanish News Detail Page English
Ionic page Ionic page Ionic page
Categories Page Business Categories Page Entertainment Article Detail Page
Ionic page Ionic page Ionic page
Favourites Page Empty Favourites Page Some Favourites Page Full
Ionic page Ionic page Ionic page
About Page French About Page + Side Menu About Page + Info Menu
Ionic page Ionic page Ionic page
Dark Mode News Page Dark Mode Categories+Menu Page Dark Mode About Page
Ionic page Ionic page Ionic page
Android About Dark Page Android About Light Page Android Categories Dark Page
Ionic page Ionic page Ionic page
Android Detail Dark Page Android Detail Dark Page Android Detail Light Page
Ionic page Ionic page Ionic page
Android Favourites Light Page Android Menu Dark Page Android Menu Light Page

πŸ“Ά Technologies

πŸ’Ύ Setup

  • It is necessary to register with news API to get an API key that is stored in the environment.ts file
  • To start the server on localhost://8100 type: ionic serve
  • to add android platform: ionic cordova platform add android
  • to create build file for android: ionic cordova build android
  • to run on device plugged in via USB cable: ionic cordova run android
  • Follow this link to deploy to IOS or Android

πŸ’» Code Examples

  • service to switch between dark/light display mode
// enable dark or light mode from HTML toggle switch event via changeThemeMode() function
export class ThemeService implements OnInit{
  darkMode: boolean;
  renderer: Renderer2;

  constructor (
    private rendererFactory: RendererFactory2,
    private storage: Storage,
    @Inject(DOCUMENT) private document: Document
  ) {
    this.renderer = this.rendererFactory.createRenderer(null, null);
  }

  async ngOnInit() {
    await this.storage.create();
}

  enableDark() {
    this.renderer.addClass(this.document.body, "dark-theme");
    this.storage.set("dark-theme", true);
    this.darkMode = true;
  }

  enableLight() {
    this.renderer.removeClass(this.document.body, "dark-theme");
    this.storage.set("dark-theme", false);
    this.darkMode = false;
  }

  changeThemeMode(e: any) {
    e.detail.checked ? this.enableDark() : this.enableLight();
  }
}

πŸ†’ Features

  • ng Control Flow latest @if and @for used in templates
  • Typescript interface used to define the expected structures of the JSON objects returned from the news API
  • Separate providers (services) page with API HTTP fetch RxJS observables
  • Custom pipes used to modify API news article titles, contents and derive '..time ago' from a date string
  • Dark mode Menu toggle changes from light to dark mode
  • Offline Storage of dark mode status & favourite articles using Ionic Storage
  • Common Refresh Component dragging down will perform refresh function
  • Common Progess Bar Component ion-card shows while news loading on News, Categories and Favourites pages
  • Localisation using i18n so user can select between English (default), Spanish and French
  • Ionic colour generator used to create color palette

πŸ“š Navigation/Pages

  • Nav side-bar: news, categories, favorites, search, about, change language, dark theme toggle + Unsplash image with credit. Sidemenu is dismissed when the user clicks on a list item.
  • News page shows world headlines using an ion-card list. Uses @if control flow to only show card if it has an image to avoid having news items with empty spaces (API data is not perfect). Shows time as '... ago' using a date convert pipe that uses day.js to convert the API Coordinated Universal Time (UTC) date-time string to '...ago'.
  • News-detail page shows the selected news item in more detail. Title has news source end text removed using a custom Angular pipe as I show this information in the top toolbar. Also uses custom pipe to show time as '... ago'. Includes working footer buttons for 'More info', which opens news source in a separate window and 'Favourite' which adds the article to a stored news 'favourites' array. Array symbol at end of article content string replaced with text using split and concat. Remove <li> from content text using regex .
  • Categories page: ion-segment used to show categories in a scrollable horizontal menu: Sport, Busines, Health, Technology, Science, General, Entertainment. So far categories only shown from English sources. Shows time as '... ago'.
  • Favourites page: articles listed in reverse date-time order that have been saved by clicking on the favourites icon on the news-detail page. Include popover that will let user delete all list items, sliding from the right deletes the favourite, prevent storage of duplicate articles. Add 'delete all' button at top. lhs sliding delete is not working.
  • About page Displays Unsplash image with author credit and short info about the app with links to APIs used. Header includes popover with links to Author Website, Github Repo and a Contact Page.

πŸ“‹ Status

  • Status: Working except including language on start-up menu, production build file created, successfully deployed to Android Studio

πŸ“‹ To-do

  • Disable clicking on menu icon when in news page.

πŸ‘ Inspiration

πŸ“ License

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

βœ‰οΈ Contact

About

πŸ“‹ Ionic-Angular app to fetch news articles from a REST API using Typescript interfaces to define the expected structure of the json objects returned & http service providers. Custom pipes used to modify API news article titles, contents and convert the Universal Time Constant (UTC) date string. Dark mode, Offline Storage of favourite articles & …

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published