COVID19 Stats using Angular Material Design

  •        0

We aggregate and tag open source projects. We have collections of more than one million projects. Check out the projects section.

Angular is a framework to build responsive User Interface for mobile, web and desktop. To know more about the introduction to Angular, refer to our previous article. In this article, we will see how to quickly build User Interface with angular material.

Material design is inspired from the real world building architecture language. It is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products. 

Material is a design system backed by open source code that helps teams build high quality digital experiences. It is a design language that Google developed in 2014. Expanding on the "card" motifs that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Material Components are available for UI  development which is also available for mobile and web. This material components are available for development without any framework based on the plain vanilla JavaScript with web pack of material design. 

Install angular material 

Angular Material Design wraps the material design to Angular framework. It is a straightforward API, it is also versatile to build their own custom components. In this article, we are going build a dashboard for COVID statistics using Angular material design. 

Install the Angular material using the below command. It will install Angular Material, the Component Dev Kit (CDK), Angular Animations. We can use cdk styles (from angular material) and mdc styles (from material).

      ng add @angular/material
npm install --save @angular/material @angular/cdk @angular/animations

COVID Statistics Application


Create the application "ng new material-app-workout". Clear the app-component.html and we can introduce one of the angular theme in styles.css

  /* You can add global styles to this file, and also import other style files */
  @import "~@angular/material/prebuilt-themes/indigo-pink.css";

Lets have the table of country wide summary stats in the Angular material table. It is done with mat-table component. When we use the component, it has to be injected in the respective module by importing it. Here, we will import it in the app module. 

Define each column with ng-container, where we define the header and data field from the datasource. Then have the mat-header-row which will hold the list of displayed columns. It will also define the data row using mat-row where we define the each element in the array. Displayed columns array should hold the matColumnDef names to be visible in the material design. We will also use Angular filter to convert the date to the India time zone (IST).

   <mat-table [dataSource]="coronastats" matSort matSortActive="created" matSortDisableClear matSortDirection="asc" class="mat-elevation-z8">
        <ng-container matColumnDef="Country" >
            <mat-header-cell *matHeaderCellDef >Country</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.Country}}</mat-cell>
        <ng-container matColumnDef="TotalConfirmed" >
            <mat-header-cell *matHeaderCellDef mat-sort-header>Total Confirmed</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.TotalConfirmed}}</mat-cell>
        <ng-container matColumnDef="NewConfirmed">
            <mat-header-cell *matHeaderCellDef mat-sort-header>New Confirmed</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.NewConfirmed}}</mat-cell>
        <ng-container matColumnDef="NewDeaths">
            <mat-header-cell *matHeaderCellDef mat-sort-header>New Deaths</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.NewDeaths}}</mat-cell>
        <ng-container matColumnDef="TotalDeaths">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Total Deaths</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.TotalDeaths}}</mat-cell>
        <ng-container matColumnDef="TotalRecovered">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Total Recovered</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.TotalRecovered}}</mat-cell>
        <ng-container matColumnDef="NewRecovered">
            <mat-header-cell *matHeaderCellDef mat-sort-header>New Recovered</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.NewRecovered}}</mat-cell>
        <ng-container matColumnDef="Date">
            <mat-header-cell *matHeaderCellDef>Date</mat-header-cell>
            <mat-cell *matCellDef="let countrystats">{{countrystats.Date |  date:'yy-MM-dd h:mm a OOOO'}}</mat-cell>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns" [ngClass]="{'isgood': row.isMedicalGood }"></mat-row>

We need to fetch the data from the REST API and populate in the datasource variable "coronastats". It can be done using simple httpclient component. 

fetchCoronaStats(): void {
    this.httpclient.get("").subscribe((response: any)=>{
      console.log("response ===>", response.Countries)
      this.coronastats = response.Countries
      this.coronastats.forEach((stat: ICoronaStats, index, arr)=> {
        let percentage: BigInteger = (stat.TotalRecovered / stat.TotalConfirmed) * 100  
        console.log(stat.Country + "==" +  percentage +  "==" +  (percentage > 50));
        if (percentage > 50) {
          stat.isMedicalGood = true;

Let's introduce sorting to the report, we need to add mat-sort-header in each mat-header-cell which requires sorting. We also need to add " matSort matSortActive="created" " attributes to the mat-table tag. Now when user clicks on the header, it will listen by the MatSort Object. MatSort object can be injected using the  "@ViewChild(MatSort) matsort: MatSort;". It can be injected to the setter method, where listener can listen on sort click events and provide the column and direction. Current API doesn't have the option of accepting sort options so lets take the datasource and sort it using the function. As all are numerical values, we can take the item and do a subtraction which will tell whether it is greater or lesser. 

@ViewChild(MatSort, {static: false}) 
  set sort(sort: MatSort) {
    sort.sortChange.subscribe((sort: Sort) => {
      console.log('sortChange', sort.direction);
      this.coronastats = this.coronastats.sort((cs1, cs2) => {
        if (sort.direction === 'asc') {
          return cs1[] - cs2[];
        } else {
          return cs2[] - cs1[];
      this.coronastats = [...this.coronastats];

When user clicks the header, the data will be sorted based on the column. Also we can play with CSS like by getting the total recovered and total confirmed percentage to identify the medical condition is good. This variable is also added to datasource to have the highlight in each mat-row with ng-class having isgood CSS class. 

 .example-spacer {
    flex: 1 1 auto;
.clickableicon {
  cursor: pointer;
  border: 1px solid white;
mat-header-cell {
  color: #3f51b5;
  font-size: 16px;
.isgood {
  background-color: lightgreen;

Finally refresh icon to keep getting the latest update can be introduced along with the title card.mat-elevation-z8 will project the component on the browser. mat-divider will have a bisecting line between the title and summary. Many icons are available as part of mat-icon tag where just the name picks the icon, here "refresh" used to refresh the corona stats.

    <mat-toolbar color="primary">
            <span>{{ title }} </span>           
           <span class="example-spacer"></span>
            <mat-icon  class="clickableicon mat-elevation-z3" aria-hidden="false"
                          aria-label="Example refresh icon" (click)="this.fetchCoronaStats()">refresh</mat-icon>

The module required from material are injected into the app.module.ts. 

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSliderModule } from '@angular/material/slider';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { HttpClientModule } from '@angular/common/http';
import { MatIconModule } from '@angular/material/icon';
  declarations: [
  imports: [
  providers: [],
    bootstrap: [AppComponent]



Nagappan is a techie-geek and a full-stack senior developer having 10+ years of experience in both front-end and back-end. He has experience on front-end web technologies like HTML, CSS, JAVASCRIPT, Angular and expert in Java and related frameworks like Spring, Struts, EJB and RESTEasy framework. He hold bachelors degree in computer science and he is very passionate in learning new technologies.

Subscribe to our newsletter.

We will send mail once in a week about latest updates on open source tools and technologies. subscribe our newsletter

Related Articles

Glific - Open Source Two Way Communication Platform for Social Sector Organizations

  • glific elixir communication architecture social-sector

Glific is an open source two way communication platform with primary focus on helping social sector organizations to interact with millions of beneficiaries concurrently through automated messages with rich media content and manual intervention wherever required. With Glific one can design flows to automate conversations, see how each of the beneficiaries is interacting with the bot and measure engagement.

Read More

JHipster - Generate simple web application code using Spring Boot and Angular

  • jhipster spring-boot angular web-application

JHipster is one of the full-stack web app development platform to generate, develop and deploy. It provides the front end technologies options of React, Angular, Vue mixed with bootstrap and font awesome icons. Last released version is JHipster 6.0.1. It is licensed under Apache 2 license.

Read More

React Media LightBox - Part 2

  • react lightbox gallery media

In this blog, we will bring the essential features zoom control, download, fullscreen to enhance the view experience of the media items. Lightbox components provide options for captioning the media items as well. Brought all the features only with material design and there are no dependencies required for the functionalities of the media lightbox.

Read More

Getting Started with Spring Batch

  • spring-batch spring-boot batch-processing

The best way to design a system for handling bulk workloads is to make it a batch system. If we are already using Spring, it will be easy to add a Spring Batch to the project. Spring batch provides a lot of boiler plate features required for batch processing like chunk based processing, transaction management and declarative input/output operations. It also provides job control for start, stop, restart, retry and skip processing also.

Read More

React Media Lightbox

  • lightbox gallery react audio video

Lightbox is a popular and widely used concept for showing the gallery of media files. It is a very impressive approach for the end user to glance through media files. Media files like audio or video will load the html audio or video controls.

Read More

Getting Started on Angular 7

  • angular ui-ux front-end-framework

Angular is a platform for building responsive web, native desktop and native mobile applications. Angular client applications are built using HTML, CSS and Typescript. Typescript is a typed superset of Javascript that compiles to plain Javascript. Angular core and optional modules are built using Typescript. Code has been licensed as MIT License.

Read More

Push Notifications using Angular

  • angular push-notifications notifications

Notifications is a message pushed to user's device passively. Browser supports notifications and push API that allows to send message asynchronously to the user. Messages are sent with the help of service workers, it runs as background tasks to receive and relay the messages to the desktop if the application is not opened. It uses web push protocol to register the server and send message to the application. Once user opt-in for the updates, it is effective way of re-engaging users with customized content.

Read More

Angular Service Workers Usage Guide

  • angular service-worker offline-app

Web developers come across scenarios like web application completely breaks when workstation goes offline. Likewise to get into our application, every time we need to open a browser and then access it. Instead if it is in app, it will be easy to access for end-user. Push notifications similar to email client need to be done through web application. All these are addressed by a magic called service worker.

Read More

Angular Security - Authentication Service

  • angular security authentication jwt

Angular is a framework for creating single page web application. Angular facilitates the security feature and protection mechanism. It provides frameworks by verifying all the routing urls with security authguard interface to validate and verify the user and its permissions.

Read More

All About Multi-Provider Feature of Angular Version 2.0

  • angular dependency-injection multi-providers

The newly introduced concept of dependency injection in Angular version 2.0 makes it an attractive front-end technology all because of one amazing feature called 'Multi-Providers'. In general, it allows the users to attach certain operations by themselves and a few plugin custom functionality which is not required in our mobile app use case.

Read More

Where should i host my open source code?

  • code-hosting open-source code hosting

I have a open source project but where should i host? This is the frequently asked question among developers. Below details will certainly help to choose the best code hosting site.

Read More

Desktop Apps using Electron JS with centralized data control

  • electronjs couchdb pouchdb desktop-app

When there is a requirement for having local storage for the desktop application context and data needs to be synchronized to central database, we can think of Electron with PouchDB having CouchDB stack. Electron can be used for cross-platform desktop apps with pouch db as local storage. It can sync those data to centralized database CouchDB seamlessly so any point desktop apps can recover or persist the data. In this article, we will go through of creation of desktop apps with ElectronJS, PouchDB and show the sync happens seamlessly with remote CouchDB.

Read More

Electron JS- Native capabilities

  • electronjs electron desktop-app

Electron is an open source library to build native applications which also works as cross-platform desktop applications. It provision operating system functionalities with help of node integration. In this article, we will go through how to access the Operating System variables, Inter system communication, System dialog, Access files, folders also their statistics.

Read More

Scene.js - Library to Create Timeline-Based Animation

  • scenejs css timeline javascript animation motion

Scene.js is a JavaScript timeline-based animation library for creating animation websites. As an animated timeline library, it allows you to create a chronological order of movements and positions of objects.

Read More

Introduction to Light 4J Microservices Framework

  • light4j microservice java programming framework

Light 4j is fast, lightweight, secure and cloud native microservices platform written in Java 8. It is based on pure HTTP server without Java EE platform. It is hosted by server UnderTow. Light-4j and related frameworks are released under the Apache 2.0 license.

Read More

Introduction to Apache Cassandra

  • cassandra database nosql

Apache Cassandra was designed by Facebook and was open-sourced in July 2008. It is regarded as perfect choice when the users demand scalability and high availability without any impact towards performance. Apache Cassandra is highly scalable, high-performance distributed database designed to handle large voluminous amounts of data across many commodity servers with no failure.

Read More

8 Reasons Why Python Scores Over PHP for Web Development

  • python php web-development

PHP, the general-purpose scripting language has been used since decades for socket programming and web development. But in recent times, Python has become the most sought after programming language. This all-purpose programming language is attracting more developers in the industry owing to its highly dynamic and extensible nature. Let's see how Python is winning over age-old PHP.

Read More

Know everything about Dependency Injection in Magento 2

  • magento dependency-injection php

Magento 2 is no longer a buzzing term. Since Its inception one and a half years ago, developers are in love with its rich technology stack. The following post emphasizes on Dependency Injection (DI), one of the best design patterns that Magento 2 uses.

Read More

AbanteCart - Easy to use open source e-commerce platform, helps selling online

  • e-commerce ecommerce cart php

AbanteCart is a free, open source shopping cart that was built by developers with a passion for free and accessible software. Founded in 2010 (launched in 2011), the platform is coded in PHP and supports MySQL. AbanteCart’s easy to use admin and basic layout management tool make this open source solution both easy to use and customizable, depending on the skills of the user. AbanteCart is very user-friendly, it is entirely possible for a user with little to no coding experience to set up and use this cart. If the user would be limited to the themes and features available in base AbanteCart, there is a marketplace where third-party extensions or plugins come to the rescue.

Read More

Web based commenting system. Embed directly in to your site

  • comment free commenting-system

Comments are very important for a blog or website to get feedback from their users. Comments could be threaded where users could be discuss and post reply to the comment. Here we going discuss about the most popular and widely used free commenting system. You need to embed their javascript code in your every page and it will take care the rest of the task.

Read More

We have large collection of open source products. Follow the tags from Tag Cloud >>

Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.