Post
Ask Question

Coronavirus (COVID-19) πŸ›‘οΈπŸ’‰ Live Status Using Angular - Part One

Introduction

 
In this article, we will learn how to build a Covid-19 live tracker application using Angular and Bootstrap.
 
Prerequisites
  • Node
  • Npm
  • Angular CLI
  • TypeScript
  • Visual Studio Code
Note
Before going through this session, please visit my previous article related to Angular applications as mentioned below.
Step 1
 
In this step I added code in app.module.ts file to make request to API and fetch dynamic data to the template.
 
Code Ref
 
For this iIneed to import httpclientmodule.
  1. import {HttpClientModule} from '@angular/common/http';  
Then import inside  the imports array.
  1. imports: [  
  2.     HttpClientModule  
  3.   ]  
Step 2
 
Then I need to make a new service specifically designed for making http request by using the mentioned API url. For this go to command prompt and then type as mentioned below:
 
F:\Covid19\angular-app\covid19-status>ng generate service services/corona.
 
Then it will create services folder with two files 
  1. corona.service.ts
  2. corona.service.spec.ts 
Step 3
 
In this step I added code in corona.service.ts file. I need to import httpclient.
  1. import {HttpClient} from '@angular/common/http';  
 Then inside constructor pass reference of import version.
  1. constructor(private http:HttpClient) {}  
Then import Observable type from rxjs.
  1. import {Observable} from 'rxjs';  
 
Code Ref
  1. getCountries():Observable<any>{  
  2.       const url = "https://xxxx.com/countries"  
  3.       return this.http.get<any>(url)  
  4.   } //This method is for populate country list in dropdown. Mention your api url in   
  5.     //place of xxxx.com  
  6.   
  7.     getCoronaRealData(country):Observable<any>{  
  8.        const url = "https://xxxx.com/country/"+ country  
  9.        return this.http.get<any>(url)  
  10.   } //this method is for show country wise covid-19 details. Mention your api url   
  11.     // in place of xxxx.com  
  12.   
  13.   getTotal():Observable<any>{  
  14.     const url = "https://xxxx.com/world/total"  
  15.     return this.http.get<any>(url)  
  16. } //this method is for worldwide covid-19 status.  Mention your api url   
  17.   // in place of xxxx.com  
Step 4
 
In this step I need to import the service in app.component.ts file:
  1. import {CoronaService} from './services/corona.service'  
Then inside constructor i added variable.
  1. constructor(private corona:CoronaService){}  
I added a method which is automatically called when component loads.
  1. ngOnInit(){  
  2.     this.corona.getCountries().subscribe((data)=>{  
  3.     console.log(data)  
  4.     this.countries = data  
  5.     })  
Here using corona variable we can access method for populating country list.
 
Code Ref
  1. export class AppComponent { //list of arrays to access dynamic data from API and these array names should match with API end points with value names
  2.   
  3.   countries:any  
  4.   country:any  
  5.   Confirmed:Number  
  6.   Recovered:Number  
  7.   Deaths:Number  
  8.   Date:Date  
  9.   Active:Number  
  10.   Country:String  
  11.   TotalConfirmed:Number  
  12.   TotalDeaths:Number  
  13.   TotalRecovered:Number  
  14.   
  15.   
  16.   constructor(private corona:CoronaService){}  
  17.   
  18.   ngOnInit(){  
  19.     this.corona.getCountries().subscribe((data)=>{  
  20.     console.log(data)  
  21.     this.countries = data  
  22.     }) //for populating country names in dropdown  
  23.   
  24.     this.getworldtotal() //for worldwide status  
  25.   }  
  26.   getCoronaData(){  
  27.     this.corona.getCoronaRealData(this.country).subscribe((data)=>{  
  28.       console.log(data) //for country wise  covid-19 status and access dynamic   
  29.     //endpoint from api  
  30.   
  31.       var index = data.length - 1  
  32.       this.Confirmed = data[index].Confirmed  
  33.       this.Recovered = data[index].Recovered  
  34.       this.Deaths = data[index].Deaths  
  35.       this.Date = data[index].Date  
  36.       this.Active = data[index].Active  
  37.       this.Country = data[index].Country  
  38.     })  
  39.   }  
  40.   
  41.   getCountry(country:any){  
  42.     this.country = country  
  43.   } //this is for when select country changed it triggers  
  44.   
  45.   getworldtotal(){  
  46.     this.corona.getTotal().subscribe((data)=>{  
  47.       console.log(data) //this is for worldwide status  
  48.         
  49.       this.TotalConfirmed = data.TotalConfirmed  
  50.       this.TotalDeaths = data.TotalDeaths  
  51.       this.TotalRecovered = data.TotalRecovered  
  52.     })  
  53.   }  
Step 5
 
Here I need to add code in app.component.html file.
 
Code Ref 
  1. <div>  
  2.   <div style="background-color:orangered; font-size: large; height:30px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">    
  3.     <h4 style="color:white; text-align:center">Coronavirus (COVID-19) Live Status With Country</h4>    
  4. </div>   
  5. <br>  
  6. <label class="label warning">Total Confirmed Worldwide :</label><label class="labeldt">{{TotalConfirmed}}</label>  
  7. <label class="label danger">Total Deaths Worldwide :</label><label class="labeldt">{{TotalDeaths}}</label>  
  8. <label class="label success">Total Recovered Worldwide :</label><label class="labeldt">{{TotalRecovered}}</label>  
  9. <br>  
  10. <br>  
  11. <br>  
  12. <br>  
  13.   <label class="label info">Country Name:</label>    
  14.   <select (change)="getCountry($event.target.value)">  
  15.     <option *ngFor="let country of countries" value={{country.Slug}}>  
  16.     {{country.Country}}  
  17.     </option>  
  18.   </select>     
  19.   <button (click)="getCoronaData()" class="button button4">Seach Corona Data</button>  
  20.   <h1 style="text-align: center; color:blue;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">Country Wise Till Date : {{Date|date:'medium'}}</h1>  
  21.   <table align="center" border="1" cellpadding="4" cellspacing="4">    
  22.     <tr>    
  23.         <th style="background-color: Yellow;color: blue">Country</th>  
  24.         <th style="background-color: Yellow;color: blue">Total Confirmed</th>    
  25.         <th style="background-color: Yellow;color: blue">Total Recovered</th>    
  26.         <th style="background-color: Yellow;color: blue">Total Deaths</th>    
  27.         <th style="background-color: Yellow;color: blue">Total Active</th>    
  28.     </tr>      
  29.         <tr>    
  30.             <td>{{Country}}</td>  
  31.             <td>{{Confirmed}}</td>    
  32.             <td>{{Recovered}}</td>    
  33.             <td>{{Deaths}}</td>    
  34.             <td>{{Active}}</td>    
  35.         </tr>  
  36. </table>  
  37. </div>  
Code Desc
 
Here in dropdown I mention the function getCountry on change event of dropdown and in option tag put a loop using Countries array and load country names.
  1. <select (change)="getCountry($event.target.value)">  
  2.     <option *ngFor="let country of countries" value={{country.Slug}}>  
  3.     {{country.Country}}  
  4.     </option>  
  5.   </select>  
In the same way I added a method in button click event that is getCoronaData() to get Covid-19 details.
  1. <button (click)="getCoronaData()" class="button button4">Seach Corona Data</button>  
I need to bind dynamic value in our template as value mentioned in app.component.ts file.
  1. <td>{{Country}}</td>  
  2.             <td>{{Confirmed}}</td>    
  3.             <td>{{Recovered}}</td>    
  4.             <td>{{Deaths}}</td>    
  5.             <td>{{Active}}</td>    
Step 6
 
I need to add css in style.css.
  1. table {    
  2.         font-family: arial, sans-serif;    
  3.         border-collapse: collapse;    
  4.         width: 100%;    
  5.     }    
  6.     
  7.     td, th {    
  8.         border: 1px solid #dddddd;    
  9.         text-align: left;    
  10.         padding: 8px;    
  11.     }    
  12.     
  13.     tr:nth-child(even) {    
  14.         background-color: #dddddd;    
  15.         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  
  16.         color: red;  
  17.     }    
  18.   
  19.     .label {  
  20.         font-size: large;  
  21.         color: white;  
  22.         padding: 8px;  
  23.         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  
  24.       }  
  25.   
  26.       .info {background-color: #2196F3;} /* Blue */  
  27.       .danger {background-color: #f44336;} /* Red */   
  28.       .success {background-color: #4CAF50;} /* Green */  
  29.       .warning {background-color: #ff9800;} /* Orange */  
  30.     
  31.     .button {    
  32.         background-color: #4CAF50;    
  33.         border: none;    
  34.         color: white;    
  35.         padding: 15px 32px;    
  36.         text-align: center;    
  37.         text-decoration: none;    
  38.         display: inline-block;    
  39.         font-size: 16px;    
  40.         margin: 4px 2px;    
  41.         cursor: pointer;    
  42.     }    
  43.     
  44.     .button4 {    
  45.         border-radius: 9px;    
  46.     }    
  47.     
  48.     input[type=date], select {    
  49.         width: 60%;    
  50.         padding: 12px 20px;    
  51.         margin: 8px 0;    
  52.         display: inline-block;    
  53.         border: 1px solid #ccc;    
  54.         border-radius: 4px;    
  55.         box-sizing: border-box;    
  56.         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  
  57.         color: blue;  
  58.         font-size: large;  
  59.     }    
  60.     
  61.     input[type=text], select {    
  62.         width: 60%;    
  63.         padding: 12px 20px;    
  64.         margin: 8px 0;    
  65.         display: inline-block;    
  66.         border: 1px solid #ccc;    
  67.         border-radius: 4px;    
  68.         box-sizing: border-box;    
  69.         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  
  70.         color: blue;  
  71.         font-size: large;  
  72.     }    
  73.   
  74.     .labeldt {  
  75.         font-size: large;  
  76.         color: red;  
  77.         padding: 8px;  
  78.         font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  
  79.         font-size: large;  
  80.       }  
OUTPUT
 
The landing page of Covid-19 live status using Angular is shown as mentioned below,
 
The list of country names are populating in dropdown list.
 
 
The country wise Covid-19 status details as mentioned below.
 
 
Check API data using browser console.
 
 

Summary

 
In this article, we have learned how to:
  • Set up Angular application using VS code
  • Create service in Angular to access API data
  • Configure API url and access its value with end points
  • Add CSS for better look to component


Similar Articles