Track Covid-19 With Angular

3 min readNov 17, 2021

For the past few weeks, I kept myself engaged with Angular. I thought of an application to enjoy the flavor of this amazing front-end framework.Within no time I got an idea to develop a COVID -19 Case tracker using online Rest API’s.

As a matter of fact, I haven’t used any database for this application. It’s purely a front end application. For the first time, I have used different libraries like Angular Material, Semantic UI, Angular Charts to develop the User Interface. Its extremely exciting process to say the least and yet I’m scratching the surface.

The entire application includes 7 components and 3 services. Let’s have a quick view of what they are ….

For navigation purpose, I have used the routing concept of angular.

1. NavBarComponent:

Here, I have used bootstrap to create the Navigation Bar, which lists out all the functionalities this application does.

2. HomeComponent:

In its first frame, a picture of COVID-19 is displayed. Next to it, I have displayed the total number of Confirmed, Recovered and Deceased cases all over the world, followed by the number of cases in India. On an interesting note, all these cases are exhibited on cards for which I have used Semantic UI.

Now... how about comparing data among various states ? To have an idea at a glance, I thought of making a pictorial representation of these numerals and I represented them as a Pie Chart and a Bar Graph, pictorially, depicting the count in each state. No, that isn’t enough … so I used 3 radio buttons for Confirmed, Recovered and Deceased Cases which sums up to all confirmed cases. All these cases are displayed in different colors, blue for Confirmed cases, green for Recovered and red for Deaths.

3. WhatIsCovid -19Component:

This component is created to enhance the user’s perception of what Covid-19 is. I think people prefer to watch or listen to a context rather than reading it. So I embedded a Youtube video demonstrating the Covid-19 Pandemic, which was officially uploaded by the WHO.

Next to it, few basic and frequently searched questions are answered in expansion panels.

4. PreventionComponent:

Few precautions to prevent the spread of coronavirus are mentioned in this particular section. Besides this, it also has few posters (designed by WHO) which can be downloaded.

5. State-WiseDataComponent:

A drop-down with the list of the Indian states is placed. When a state is selected, a total number of Confirmed, Active, Recovered and Deceased cases are displayed in cards followed by a table containing the list of districts and their respective cases in distinct order(s).