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
  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
  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
  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
  16. constructor(private corona:CoronaService){}
  18. ngOnInit(){
  19. this.corona.getCountries().subscribe((data)=>{
  20. console.log(data)
  21. this.countries = data
  22. }) //for populating country names in dropdown
  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
  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. }
  41. getCountry(country:any){
  42. this.country = country
  43. } //this is for when select country changed it triggers
  45. getworldtotal(){
  46. this.corona.getTotal().subscribe((data)=>{
  47. console.log(data) //this is for worldwide status
  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. }
  7. td, th {
  8. border: 1px solid #dddddd;
  9. text-align: left;
  10. padding: 8px;
  11. }
  13. tr:nth-child(even) {
  14. background-color: #dddddd;
  15. font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  16. color: red;
  17. }
  19. .label {
  20. font-size: large;
  21. color: white;
  22. padding: 8px;
  23. font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  24. }
  26. .info {background-color: #2196F3;} /* Blue */
  27. .danger {background-color: #f44336;} /* Red */
  28. .success {background-color: #4CAF50;} /* Green */
  29. .warning {background-color: #ff9800;} /* Orange */
  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. }
  44. .button4 {
  45. border-radius: 9px;
  46. }
  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. }
  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. }
  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