: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.
News Page French | News Page Spanish | News Page English |
News Detail Page French | News Detail Page Spanish | News Detail Page English |
Categories Page Business | Categories Page Entertainment | Article Detail Page |
Favourites Page Empty | Favourites Page Some | Favourites Page Full |
About Page French | About Page + Side Menu | About Page + Info Menu |
Dark Mode News Page | Dark Mode Categories+Menu Page | Dark Mode About Page |
Android About Dark Page | Android About Light Page | Android Categories Dark Page |
Android Detail Dark Page | Android Detail Dark Page | Android Detail Light Page |
Android Favourites Light Page | Android Menu Dark Page | Android Menu Light Page |
environment.ts
fileionic serve
ionic cordova platform add android
ionic cordova build android
ionic cordova run android
// 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();
}
}
@if
and @for
used in templates@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'.<li>
from content text using regex .[email protected]