:clipboard: 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 & settings using Ionic Storage. Common Refresh & Progress Bar Components. Localisation using i18n so user can select between English (default), Spanish and French.
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.
// enable dark or light mode from HTML toggle switch event via changeThemeMode() functionexportclassThemeServiceimplementsOnInit{darkMode: boolean;renderer: Renderer2;constructor(privaterendererFactory: RendererFactory2,privatestorage: Storage,
@Inject(DOCUMENT)privatedocument: Document){this.renderer=this.rendererFactory.createRenderer(null,null);}asyncngOnInit(){awaitthis.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
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