- The Coronavirus API this app is based on no longer exists
- This is a responsive Angular app that displayed Covid API data & news for the user country and worldwide. Data was displayed using google-charts and Angular Material tables/display components.
- Note: to open web links in a new window use: ctrl+click on link
- General: Chart data from Corona API JSON time-series of coronavirus cases (confirmed, deaths and recovered) per country. Detects user location and shows data from that country.
- Home Page: World and local Covid data - using iPapa API to detect user country. Data shown in tables on Mat-cards and on Google charts using tab-groups to select between confirmed cases, deaths and recovered.
- Countries Page: Covid data is fetched from local storage and displayed using a Mat-Table of countries.
- News & NewsDetail Pages: Covid news data is shown on Mat-cards. The Day.js npm module is used to convert the UTC format date into '... ago'. Clicking on a news card will route the user to a news detail page with the JSON data passed using angular router navigation extras. The Coronatracker API does not have a lot of the latest news but it demonstrates a working app.
- Charts Page Pie and column charts using
angular-google-charts
.
- About Page: Mat-cards show details of each page with useful links.
- Contact Page: Mat-card with Github and contact details from the Github API (no API access key required for this).
- Install dependencies by running
npm i
- Run
ng test
for Jasmine tests carried out in Karma console
- Run
ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files
- Run
ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build
- Deploy using
firebase deploy
- Run
ng test
to execute the unit tests via Karma.
- Run
ng e2e
to execute the end-to-end tests via Protractor.
- extract from
covid-news.component.ts
to subscribe to news API data and store it in local storage.
// subscribe to news API data observable
getCovidNews(): void {
this.covidDataService.getCovidNews().subscribe((data: NewsItems) => {
this.storageService.set("totalNewsItems", data.total);
this.storageService.set("storedNewsItems", data.items);
this.newsItems = this.storageService.get("storedNewsItems");
});
}
// create news API observable
getCovidNews(): Observable<NewsItems> {
this.newsArrayLength = 20;
this.storageService.set('newsArrayLength', this.newsArrayLength);
this.userCountry = this.storageService.get('userCountryData').name;
return this.http
.get<NewsItems>(
apiNewsBaseUrl +
`?limit=${this.newsArrayLength}&offset&country=${this.userCountry}`
)
.pipe(
// tap((data: NewsItems) => console.log('news data', data)),
map((data: NewsItems) => data),
catchError((err) => {
return throwError(() => new Error('News Item data not found, error: '));
})
);
}
- Separate Material module with all Material modules accessed via Shared module - review this decision!
- Detects user location data during the Home page ng 'on initialisation' lifecycle using a simple API GET request via the
location.service.ts
file.
- Status: This was a working app until the Coronavirus API was removed. This code could be adapted to a new API.
- To-Do: Nothing. Consider Archiving.
- This project is licensed under the terms of the MIT license.