How to design simple COVID-19 Tracker with Angular 10?

Today, the pandemic made everyone’s life miserable. Everyone is trying to get livelihood and stay alive. In this regard, we are trying to develop a tracker using technology where Angular 10 becomes the useful one.

There is an application used for tracking the patient details on country-wise and another application is for tracking Indian state-wise and district-wise patient details. Using this application, we will track the state-wise patient details for a particular date. Moreover, we will try to display the Indian map, where user can click on any of the states and get the patient details of that particular state.

We will also provide a list with all state names as a dropdown here. Moreover, any user can choose any state and get the data of that particular state easily. Here we are using a free public API derived from the Covid19India website for data and Angular 10 as a tracker builder.

To learn more about features of AngularJS, you can enroll for a live demo on Angularjs Online Training

Create Angular 10 Application using Angular CLI

Creating a simple and much useful tracker needs some good codes and applications. Here, we can create a new Angular application using Angular CLI using the following command.

ng new covid19indiantracker

After creating the new application and node modules, we have the option to add material design to the application using the following command.

ng add @angular/material

Further, we can choose the default theme and other default options for material design within this tracker development.

We also need a bootstrap package to create styles in our application along with angular material. The below command is useful to install the bootstrap latest package.

npm install bootstrap

After installing the package, we can open the application in the Visual Studio Code as well.

Later, we must have to import refs for HttpClientModule, MatCardModule, and MatSelectModule modules within app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { MatCardModule } from '@angular/material/card';
import { MatSelectModule } from '@angular/material/select';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
MatCardModule,
MatSelectModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Create a data service

Now, we will create a data service to display data from Covid-19 API application.

Take your career to new heights of success with Angular Training

data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) { }
private url: string = "https://api.covid19api.com/summary";
getData(): Observable<any> {
return this.http.get(this.url)
.pipe((response) => response);
}
}

The above image is the sample response from the API method. It includes two parts such as Global summary and country-wise summary part. Besides, this is the whole country data.

Moreover, we can create some additional model classes within the model.ts file.

Get More Info Here Angular Certification

model.ts

export class SummaryData {
Global: GlobalData;
Countries: Array<CountryData>;
Date: Date;
}
export class GlobalData {
NewConfirmed: number;
NewDeaths: number;
NewRecovered: number;
TotalConfirmed: number;
TotalDeaths: number;
TotalRecovered: number
}
export class CountryData extends GlobalData {
Country: string;
CountryCode: string;
Date: Date;
Slug: string
}

Now, we have developed three model classes SummaryData, CountryData, and GlobalData.

Furthermore, we can alter the app.component.ts file with the below given code.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { SummaryData, CountryData } from './models';
import { DataService } from './data.service';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [DatePipe]
})
export class AppComponent implements OnInit {
title = 'covid19-tracker';
summaryData: SummaryData;
indiaData: CountryData;
selectedCountryData: CountryData;
highlyConfirmedData: Array<CountryData>;
highlyDeathData: Array<CountryData>;
highlyRecoveredData: Array<CountryData>;
currentDate: string;
constructor(private service: DataService, private datePipe: DatePipe) { }
ngOnInit() {
let date = new Date();
this.currentDate = this.datePipe.transform(date,'dd-MMM-yyyy');
this.getAllData();
}
getAllData() {
this.service.getData().subscribe(
response => {
this.summaryData = response;
this.getIndiaData();
this.getSortedData();
}
)
}
getIndiaData() {
this.indiaData = this.summaryData.Countries.find(x => x.Slug == "india");
}
getSortedData() {
let data = JSON.parse(JSON.stringify(this.summaryData.Countries));
this.highlyConfirmedData = data.sort((a, b) => b.TotalConfirmed - a.TotalConfirmed).slice(0, 10);
this.highlyDeathData = data.sort((a, b) => b.TotalDeaths - a.TotalDeaths).slice(0, 10);
this.highlyRecoveredData = data.sort((a, b) => b.TotalRecovered - a.TotalRecovered).slice(0, 10);
}
}

Thus, we have displayed the global summary data from various data services and populated other data for our app. Here, we have used very simple logic in this regard.

We can change the app.component.html file with below code.

app.component.html

<div style="width: 1200px;">
<div class="same-row" style="width: 550px;">
<img src="../assets/CovidTracker.PNG">
</div>
<div class="same-row" style="font-weight: bold;">
As on : {{currentDate}}
</div>
<div class="same-row">
<mat-form-field appearance="fill" style="width: 300px;">
<mat-label>Choose a Country</mat-label>
<mat-select [(value)]="selectedCountryData">
<mat-option *ngFor="let country of summaryData?.Countries" [value]="country">{{country.Country}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div>
<div class="same-row">
<mat-card class="covid-card">
<mat-card-header>
<div mat-card-avatar>
<img
src="https://www.sanlam.co.uk/web/media/media/vectors%2018/globe_light_blue_rgb.png?width=32&height=32&mode=crop">
</div>
<mat-card-title>Global Summary</mat-card-title>
<mat-card-subtitle>Total Countries</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<table>
<tr>
<td>
New Recovered
</td>
<td>
{{summaryData?.Global?.NewRecovered | number}}
</td>
</tr>
<tr>
<td>
Total Recovered
</td>
<td>
{{summaryData?.Global?.TotalRecovered | number}}
</td>
</tr>
<tr>
<td>
New Confirmed
</td>
<td>
{{summaryData?.Global?.NewConfirmed | number}}
</td>
</tr>
<tr>
<td>
Total Confirmed
</td>
<td>
{{summaryData?.Global?.TotalConfirmed | number}}
</td>
</tr>
<tr>
<td>
New Deaths
</td>
<td>
{{summaryData?.Global?.NewDeaths | number}}
</td>
</tr>
<tr>
<td>
Total Deaths
</td>
<td>
{{summaryData?.Global?.TotalDeaths | number}}
</td>
</tr>
</table>
</mat-card-content>
</mat-card>
</div>
<div class="same-row">
<mat-card class="covid-card">
<mat-card-header>
<div mat-card-avatar>
<img src="https://www.countryflags.io/IN/shiny/32.png">
</div>
<mat-card-title>Country Summary</mat-card-title>
<mat-card-subtitle>India</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<table>
<tr>
<td>
New Recovered
</td>
<td>
{{indiaData?.NewRecovered | number}}
</td>
</tr>
<tr>
<td>
Total Recovered
</td>
<td>
{{indiaData?.TotalRecovered | number}}
</td>
</tr>
<tr>
<td>
New Confirmed
</td>
<td>
{{indiaData?.NewConfirmed | number}}
</td>
</tr>
<tr>
<td>
Total Confirmed
</td>
<td>
{{indiaData?.TotalConfirmed | number}}
</td>
</tr>
<tr>
<td>
New Deaths
</td>
<td>
{{indiaData?.NewDeaths | number}}
</td>
</tr>
<tr>
<td>
Total Deaths
</td>
<td>
{{indiaData?.TotalDeaths | number}}
</td>
</tr>
</table>
</mat-card-content>
</mat-card>
</div>
<div class="same-row" *ngIf="selectedCountryData!=undefined">
<mat-card class="covid-card">
<mat-card-header>
<div mat-card-avatar>
<img src="https://www.countryflags.io/{{selectedCountryData.CountryCode}}/shiny/32.png">
</div>
<mat-card-title>Country Summary</mat-card-title>
<mat-card-subtitle>{{selectedCountryData.Country}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<table>
<tr>
<td>
New Recovered
</td>
<td>
{{selectedCountryData?.NewRecovered | number}}
</td>
</tr>
<tr>
<td>
Total Recovered
</td>
<td>
{{selectedCountryData?.TotalRecovered | number}}
</td>
</tr>
<tr>
<td>
New Confirmed
</td>
<td>
{{selectedCountryData?.NewConfirmed | number}}
</td>
</tr>
<tr>
<td>
Total Confirmed
</td>
<td>
{{selectedCountryData?.TotalConfirmed | number}}
</td>
</tr>
<tr>
<td>
New Deaths
</td>
<td>
{{selectedCountryData?.NewDeaths | number}}
</td>
</tr>
<tr>
<td>
Total Deaths
</td>
<td>
{{selectedCountryData?.TotalDeaths | number}}
</td>
</tr>
</table>
</mat-card-content>
</mat-card>
</div>
</div>
<div>
<div class="same-row table-data">
<p style="font-weight: bold; color: darkgreen; font-size: large;">Highest Recovered Cases</p>
<table>
<tr>
<td style="font-weight: bold;">
Sl.No.
</td>
<td style="font-weight: bold;">
Country
</td>
<td style="font-weight: bold;">
Total Recovered
</td>
</tr>
<tr *ngFor="let country of highlyRecoveredData; let i=index">
<td>
{{i+1}}
</td>
<td>
{{country.Country}}
</td>
<td>
{{country.TotalRecovered | number}}
</td>
</tr>
</table>
</div>
<div class="same-row table-data">
<p style="font-weight: bold; color:gray; font-size: large;">Highest Confirmed Cases</p>
<table>
<tr>
<td style="font-weight: bold;">
Sl.No.
</td>
<td style="font-weight: bold;">
Country
</td>
<td style="font-weight: bold;">
Total Confirmed
</td>
</tr>
<tr *ngFor="let country of highlyConfirmedData; let i=index">
<td>
{{i+1}}
</td>
<td>
{{country.Country}}
</td>
<td>
{{country.TotalConfirmed | number}}
</td>
</tr>
</table>
</div>
<div class="same-row table-data">
<p style="font-weight: bold; color: indianred; font-size: large;">Highest Death Cases</p>
<table>
<tr>
<td style="font-weight: bold;">
Sl.No.
</td>
<td style="font-weight: bold;">
Country
</td>
<td style="font-weight: bold;">
Total Deaths
</td>
</tr>
<tr *ngFor="let country of highlyDeathData; let i=index">
<td>
{{i+1}}
</td>
<td>
{{country.Country}}
</td>
<td>
{{country.TotalDeaths | number}}
</td>
</tr>
</table>
</div>
</div>

In the above code, we have used Angular material select components to list the country name. We have also used a material card to visualize the entire Covid-19 data. Moreover, we have used some inline styles within the HTML file but that is not advisable. These codes can be cleaned up easily as these inline styles are not much effective in this regard.

Here, we can add some CSS class files inside the app.component.css file.

app.component.css

.covid-card {
max-width: 350px;
}
.same-row {
display: inline-block;
padding: 10px;
}
.table-data {
padding: 10px;
margin: 10px;
}
table {
padding: 10px;
width: 300px;
border: 1px solid gray;
background-color: honeydew;
}
tr {
margin: 10px;
padding: 10px;
}
td {
height: 30px;
vertical-align: center;
border: 1px dotted gray;
}

Finally, we have successfully built our Covid-19 tracker application in using Angular 10. Now, we will run the application and check the output:

Thus, we have presented Global & Indian country summary along with the top ten highest recovered, confirmed, and death cases above.

Conclusion

Thus, the above details explain how to design a simple Covid-19 tracker using Angular 10. It makes the sense that how the disease has spread all over the world. The details give a summary of the data derived from the parts of the world. To learn more about technological developments in tracking the disease, one can opt for Angular Online Training. This learning will help you more to understand it.