Post
Ask Question

Indian State-wise COVID-19 Tracker In Angular 10

Introduction


I have already published an article about simple COVID-19 tracker on C# Corner and also deployed the application in Google firebase. You can read the article from below link.
 
 
In this post, we will see how to create a COVID-19 tracker application in Angular 10. We can track the Indian state-wise and district-wise COVID-19 patient details using this application. We will use two public APIs for getting the latest patient data. We will use https://api.covid19india.org/data.json for getting the entire state-wise patient data and use https://api.covidindiatracker.com/state_data.json for getting district-wise patient details.

Create Angular 10 application using Angular CLI


We can use below command to create new Angular application.
 
ng new Covid19-India-Tracker
 
After few moments, new Angular application will be ready with required node modules. We can open the application in Visual Studio Code.
 
We need bootstrap package to add some styles in our application. We can install the latest bootstrap package using npm command
 
npm install bootstrap
 
We must import bootstrap package inside the style.css file. So that, this package will be available in entire application context.
 
style.css
  1. @import "~bootstrap/dist/css/bootstrap.css";  
  2. body {  
  3.     overflow: hidden;  
  4.     /* Hide scrollbars */  
  5. }  
We must register “HttpClientModule” and “FormsModule” inside app.module file.
 
app.module.ts
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3.   
  4. import { AppComponent } from './app.component';  
  5.   
  6. import { HttpClientModule } from '@angular/common/http'  
  7. import { FormsModule } from '@angular/forms'  
  8.   
  9. @NgModule({  
  10.   declarations: [  
  11.     AppComponent  
  12.   ],  
  13.   imports: [  
  14.     BrowserModule,  
  15.     HttpClientModule,  
  16.     FormsModule  
  17.   ],  
  18.   providers: [],  
  19.   bootstrap: [AppComponent]  
  20. })  
  21. export class AppModule { }  
We can create a service to get data from public APIs. Use below CLI command to create a new service.
 
ng generate service Data
 
Add below code inside the service to get data from public API.
 
data.service.ts
  1. import { Injectable } from '@angular/core';  
  2. import { HttpClient } from '@angular/common/http'  
  3. import { Observable } from 'rxjs';  
  4.   
  5. @Injectable({  
  6.   providedIn: 'root'  
  7. })  
  8. export class DataService {  
  9.   
  10.   constructor(private http: HttpClient) { }  
  11.   
  12.   getAllData(): Observable<any> {  
  13.     let url = 'https://api.covid19india.org/data.json'  
  14.     return this.http.get(url).  
  15.       pipe((response) => response  
  16.       )  
  17.   }  
  18.   
  19.   getStateData(): Observable<any> {  
  20.     let url = 'https://api.covidindiatracker.com/state_data.json'  
  21.     return this.http.get(url).  
  22.       pipe((response) => response  
  23.       )  
  24.   }  
  25. }  
Create a model class file and add below classes inside the file.
 
models.ts
  1. export class Data {  
  2.     active: number;  
  3.     confirmed: number;  
  4.     deaths: number;  
  5.     deltaconfirmed: number;  
  6.     deltadeaths: number;  
  7.     deltarecovered: number;  
  8.     lastupdatedtime: string;  
  9.     migratedother: number;  
  10.     recovered: number;  
  11.     state: string;  
  12.     statecode: string;  
  13. }  
  14.   
  15. export class ChildData {  
  16.     id: string;  
  17.     state: string;  
  18.     districtData: DistrictData[];  
  19. }  
  20.   
  21. export class DistrictData {  
  22.     confirmed: number;  
  23.     id: string;  
  24.     name: string;  
  25. }  
We can modify app.component class file with below code.
 
app.component.ts
  1. import { Component, OnInit } from '@angular/core';  
  2. import { DataService } from './data.service'  
  3. import { Data, ChildData } from './models'  
  4.   
  5. @Component({  
  6.   selector: 'app-root',  
  7.   templateUrl: './app.component.html',  
  8.   styleUrls: ['./app.component.css']  
  9. })  
  10. export class AppComponent implements OnInit {  
  11.   title = 'Covid19-India-Tracker';  
  12.   allData: Data[];  
  13.   totalData: Data;  
  14.   selectedStateCode: string;  
  15.   selectedDistrictCode: string;  
  16.   stateData: Data;  
  17.   statewiseData: ChildData[];  
  18.   districtData: ChildData;  
  19.   
  20.   constructor(private service: DataService) { }  
  21.   
  22.   ngOnInit() {  
  23.     this.getAllData();  
  24.   }  
  25.   
  26.   getAllData() {  
  27.     this.service.getAllData().subscribe(  
  28.       response => {  
  29.         this.allData = response.statewise;  
  30.         this.totalData = this.allData.find(x => x.statecode == 'TT');  
  31.         this.allData = this.allData.filter(x => x.statecode != 'TT' && x.statecode != 'UN');  
  32.         this.getStateData();  
  33.       }  
  34.     )  
  35.   }  
  36.   
  37.   getStateData() {  
  38.     this.service.getStateData().subscribe(  
  39.       response => {  
  40.         this.statewiseData = response;  
  41.       }  
  42.     )  
  43.   }  
  44.   
  45.   onStateSelected() {  
  46.     this.stateData = this.allData.find(x => x.statecode == this.selectedStateCode)  
  47.     let stateCode = (this.selectedStateCode == 'LA') ? 'LK' : this.selectedStateCode;  
  48.     this.districtData = this.statewiseData.find(x => x.id == `IN-${stateCode}`);  
  49.   }  
  50. }  
We can modify app.component html file with below code.
 
app.component.html
  1. <div class="row margin-class">  
  2.   <div class="col-3">  
  3.     <button type="button" class="btn btn-outline-secondary">COVID-19 All India Tracker by Sarathlal</button>  
  4.   </div>  
  5.   <div class="col-3">  
  6.     <h5><span class="badge badge-secondary">Choose a State</span></h5>  
  7.     <select name="selectedState" id="state" class="form-control" [(ngModel)]="selectedStateCode"  
  8.       (change)='onStateSelected()'>  
  9.       <option *ngFor="let data of allData" [value]="data.statecode">{{data.state}}</option>  
  10.     </select>  
  11.   </div>  
  12. </div>  
  13.   
  14. <div class="row margin-class">  
  15.   <div class="col-3">  
  16.     <h5><span class="badge badge-secondary">All India Summary</span></h5>  
  17.     <table class="table table-striped">  
  18.       <tbody>  
  19.         <tr>  
  20.           <td>Total Confirmed</td>  
  21.           <td>{{totalData?.confirmed | number}}</td>  
  22.         </tr>  
  23.         <tr>  
  24.           <td>Total Active</td>  
  25.           <td>{{totalData?.active | number}}</td>  
  26.         </tr>  
  27.         <tr>  
  28.           <td>Total Recovered</td>  
  29.           <td>{{totalData?.recovered | number}}</td>  
  30.         </tr>  
  31.         <tr>  
  32.           <td>Total Deaths</td>  
  33.           <td>{{totalData?.deaths | number}}</td>  
  34.         </tr>  
  35.         <tr>  
  36.           <td>Newly Confirmed</td>  
  37.           <td>{{totalData?.deltaconfirmed | number}}</td>  
  38.         </tr>  
  39.         <tr>  
  40.           <td>Newly Recovered</td>  
  41.           <td>{{totalData?.deltarecovered | number}}</td>  
  42.         </tr>  
  43.         <tr>  
  44.           <td>Newly Deaths</td>  
  45.           <td>{{totalData?.deltadeaths | number}}</td>  
  46.         </tr>  
  47.         <tr>  
  48.           <td>Migrated to Other</td>  
  49.           <td>{{totalData?.migratedother | number}}</td>  
  50.         </tr>  
  51.         <tr>  
  52.           <td>Last Updated Time</td>  
  53.           <td>{{totalData?.lastupdatedtime}}</td>  
  54.         </tr>  
  55.       </tbody>  
  56.     </table>  
  57.   </div>  
  58.   
  59.   <div *ngIf="selectedStateCode==undefined">  
  60.     <img src="../assets/thediplomat-2020-04-01.png" style="width: 350px;" />  
  61.   </div>  
  62.   <div class="col-3" *ngIf="selectedStateCode!=undefined">  
  63.     <h5><span class="badge badge-secondary">{{stateData?.state}} Summary</span></h5>  
  64.     <table class="table table-striped">  
  65.       <tbody>  
  66.         <tr>  
  67.           <td>Total Confirmed</td>  
  68.           <td>{{stateData?.confirmed | number}}</td>  
  69.         </tr>  
  70.         <tr>  
  71.           <td>Total Active</td>  
  72.           <td>{{stateData?.active | number}}</td>  
  73.         </tr>  
  74.         <tr>  
  75.           <td>Total Recovered</td>  
  76.           <td>{{stateData?.recovered | number}}</td>  
  77.         </tr>  
  78.         <tr>  
  79.           <td>Total Deaths</td>  
  80.           <td>{{stateData?.deaths | number}}</td>  
  81.         </tr>  
  82.         <tr>  
  83.           <td>Newly Confirmed</td>  
  84.           <td>{{stateData?.deltaconfirmed | number}}</td>  
  85.         </tr>  
  86.         <tr>  
  87.           <td>Newly Recovered</td>  
  88.           <td>{{stateData?.deltarecovered | number}}</td>  
  89.         </tr>  
  90.         <tr>  
  91.           <td>Newly Deaths</td>  
  92.           <td>{{stateData?.deltadeaths | number}}</td>  
  93.         </tr>  
  94.         <tr>  
  95.           <td>Migrated to Other</td>  
  96.           <td>{{stateData?.migratedother | number}}</td>  
  97.         </tr>  
  98.         <tr>  
  99.           <td>Last Updated Time</td>  
  100.           <td>{{stateData?.lastupdatedtime}}</td>  
  101.         </tr>  
  102.       </tbody>  
  103.     </table>  
  104.   </div>  
  105.   
  106.   <div class="col-3" *ngIf="selectedStateCode!=undefined">  
  107.     <h5><span class="badge badge-secondary">{{stateData?.state}} District wise Details</span></h5>  
  108.     <div>  
  109.       <table class="table table-sm">  
  110.         <thead>  
  111.           <tr>  
  112.             <th scope="col">District Name</th>  
  113.             <th scope="col">Total Confirmed</th>  
  114.           </tr>  
  115.         </thead>  
  116.         <tbody>  
  117.           <tr *ngFor="let data of districtData?.districtData">  
  118.             <td>{{data.name}}</td>  
  119.             <td>{{data.confirmed | number}}</td>  
  120.           </tr>  
  121.         </tbody>  
  122.       </table>  
  123.     </div>  
  124.   
  125.   </div>  
  126. </div>  
We need some common style in the application. We can modify the css class file with below code.
 
app.component.css
  1. tbody {  
  2.     height: 550px;  
  3.     overflow-y: auto;  
  4. }  
  5.   
  6. thead>tr, tbody {  
  7.     display: block;  
  8. }  
  9.   
  10. .margin-class{  
  11.     margin: 7px;  
  12. }  
  13.   
  14. img {  
  15.     opacity: 0.3;  
  16.   }  
We have completed the coding part. We can run the application now.
 
 
We can choose any of the state from drop down list.
 
 
If you choose any state, state-wise patient details will be shown along with district-wise confirmed patients count.
 
 
 
I am not claiming full accuracy for the patient data provided by above public APIs. Both APIs are maintained by separate organizations.
 
I have deployed the application in Google firebase. You can check the COVID-19 patient details using this LIVE  application.

Conclusion


In this post, we have seen how to create a COVID-19 tracker application with Angular 10. We have used two public APIs for getting patient data. We can easily track the state-wise and district-wise patient details using this simple application. Please give your valuable feedback about this application.


Similar Articles