Easily Share Data Between Two Unrelated Components In Angular

Introduction

In Angular, there are various ways to share data between two components. We are using @Input and @Output variables to share data between parent and child components. In this post, we will see how to share data between two unrelated components.

We will use a shared service, subject variable, and subscription variable to share data between unrelated components.

We have added a subject variable inside the service. We will emit the data from one component using this subject variable.

We can emit any type of data from the subject variable.

We will subscribe this subject variable to another component and receive the data, which is sent by the first component.

To easily understand the practical usage of this topic, we can create a sample application with two different components and share data between these components. We will create a simple Covid-19 application. This application will show an Indian Map in one component. Users can click on any of the states in this Indian Map, and the application will show the current COVID-19 status of that state in a popup window. Whenever the user clicks on states, the shared subject variable will emit data and this data will be received by a subscription variable which is added in another navigation menu component. This nav-bar component will display the log count as a notification, instantly. We will add this log data into a variable inside the shared service and we will show all these log data in another log component. We will see all these steps one by one.

Create Angular project using Angular CLI

You can open a command prompt and use the below command to create a new Angular project.

ng new AngularShareData

The above Angular CLI command will ask some questions before creating a new project. We can opt for the default options except routing. We will choose routing for this project. By default, it is not selected.

This will take a few minutes to install the required node packages to our project.

After completing the project creation, we can open this project folder in the Visual Studio Code editor.

We must install a bootstrap package to our project for some styling purposes.

npm install bootstrap

We can add the below line of code inside the style.css file. So that, we can use the bootstrap library in the entire application, without any further reference.

style.css

@import "~bootstrap/dist/css/bootstrap.css";

In our Covid-19 app, we will display the state name, confirmed case, and delta (new confirmed case) as a log. For this purpose, we need a model. We can create a model class using the below command.

ng generate class covid-data

Add the below code to this class file.

covid-data.ts

export class CovidData {
    state: string;
    confirmed: number;
    delta: number;
}

Now we can create our important service SharedService.

ng generate service shared

shared.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { CovidData } from './covid-data';
@Injectable({
  providedIn: 'root'
})
export class SharedService {
  addLogs: Subject<CovidData>;
  logs: Array<CovidData>;
  constructor() {
    this.addLogs = new Subject<CovidData>();
    this.logs = new Array<CovidData>();
  }
}

We have added a subject variable inside this service. As I mentioned earlier, we will use this subject variable to emit and subscribe data in two different components.

We can create one data service for getting COVID-19 data.

ng generate service data

data.serivice.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  private states: any = [
    {
      "key": "AN",
      "name": "Andaman and Nicobar Islands"
    },
    {
      "key": "AP",
      "name": "Andhra Pradesh"
    },
    {
      "key": "AR",
      "name": "Arunachal Pradesh"
    },
    {
      "key": "AS",
      "name": "Assam"
    },
    {
      "key": "BR",
      "name": "Bihar"
    },
    {
      "key": "CH",
      "name": "Chandigarh"
    },
    {
      "key": "CH",
      "name": "Chhattisgarh"
    },
    {
      "key": "DN",
      "name": "Dadra and Nagar Haveli"
    },
    {
      "key": "DL",
      "name": "Delhi"
    },
    {
      "key": "GA",
      "name": "Goa"
    },
    {
      "key": "GJ",
      "name": "Gujarat"
    },
    {
      "key": "HR",
      "name": "Haryana"
    },
    {
      "key": "HP",
      "name": "Himachal Pradesh"
    },
    {
      "key": "JK",
      "name": "Jammu and Kashmir"
    },
    {
      "key": "JH",
      "name": "Jharkhand"
    },
    {
      "key": "KA",
      "name": "Karnataka"
    },
    {
      "key": "KL",
      "name": "Kerala"
    },
    {
      "key": "LA",
      "name": "Ladakh"
    },
    {
      "key": "LD",
      "name": "Lakshadweep"
    },
    {
      "key": "MP",
      "name": "Madhya Pradesh"
    },
    {
      "key": "MH",
      "name": "Maharashtra"
    },
    {
      "key": "MN",
      "name": "Manipur"
    },
    {
      "key": "ML",
      "name": "Meghalaya"
    },
    {
      "key": "MZ",
      "name": "Mizoram"
    },
    {
      "key": "NL",
      "name": "Nagaland"
    },
    {
      "key": "OR",
      "name": "Odisha"
    },
    {
      "key": "PY",
      "name": "Puducherry"
    },
    {
      "key": "PB",
      "name": "Punjab"
    },
    {
      "key": "RJ",
      "name": "Rajasthan"
    },
    {
      "key": "SK",
      "name": "Sikkim"
    },
    {
      "key": "TN",
      "name": "Tamil Nadu"
    },
    {
      "key": "TG",
      "name": "Telangana"
    },
    {
      "key": "TR",
      "name": "Tripura"
    },
    {
      "key": "UP",
      "name": "Uttar Pradesh"
    },
    {
      "key": "UT",
      "name": "Uttarakhand"
    },
    {
      "key": "WB",
      "name": "West Bengal"
    }
  ];

  getStateData(): Observable<any> {
    let url = `https://api.covid19india.org/v4/min/data.min.json`;
    return this.http.get(url).pipe(
      map(response => {
        return response;
      })
    );
  }

  getStates(): any {
    return this.states;
  }
}

We need a modal popup to display the selected state’s Covid information. Hence, we can create a modal service.

ng generate service modal\modal

modal.service.ts

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class ModalService {
  private modals: any[] = [];

  add(modal: any) {
    this.modals.push(modal);
  }
  remove(id: string) {
    this.modals = this.modals.filter(x => x.id !== id);
  }
  open(id: string) {
    const modal = this.modals.find(x => x.id === id);
    modal.open();
  }
  close(id: string) {
    const modal = this.modals.find(x => x.id === id);
    modal.close();
  }
}

Now, we can create a modal component using the below command.

ng generate component modal

Replace the component class code with the below code.

modal.component.ts

import { Component, ViewEncapsulation, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
import { ModalService } from './modal.service';

@Component({
    selector: 'my-modal',
    templateUrl: 'modal.component.html',
    styleUrls: ['modal.component.less'],
    encapsulation: ViewEncapsulation.None
})
export class ModalComponent implements OnInit, OnDestroy {
    @Input() id: string;
    private element: any;

    constructor(private modalService: ModalService, private el: ElementRef) {
        this.element = el.nativeElement;
    }

    ngOnInit(): void {
        if (!this.id) {
            console.error('modal must have an id');
            return;
        }

        document.body.appendChild(this.element);

        this.element.addEventListener('click', el => {
            if (el.target.className === 'my-modal') {
                this.close();
            }
        });

        this.modalService.add(this);
    }

    ngOnDestroy(): void {
        this.modalService.remove(this.id);
        this.element.remove();
    }

    open(): void {
        this.element.style.display = 'block';
        document.body.classList.add('my-modal-open');
    }

    close(): void {
        this.element.style.display = 'none';
        document.body.classList.remove('my-modal-open');
    }
}

Replace the template code with the below code.

modal.component.html

<p class="my-modal">
    <p class="my-modal-body">
        <ng-content></ng-content>
    </p>
</p>
<p class="my-modal-background"></p>

Please note, that we are using fewer files instead of CSS files for component styling.

Replace the style code with the below code.

modal. component. less

.my-modal {
    display: none;
}
.my-modal {
    position: fixed;
    top: 20%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow: auto;
}
.my-modal-body {
    padding: 20px;
    background: #fff;
    margin: 30px;
    width: 350px;
    height: 300px;
}
.my-modal-background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: 0.75;
    z-index: 900;
}
body.my-modal-open {
    overflow: hidden;
}

Create a new component for displaying the Indian Map and showing COVID-19 status for each state. We can name it as a Home component.

ng generate component home

Replace the component class code with the below code.

home.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { CovidData } from '../covid-data';
import { DataService } from '../data.service';
import { ModalService } from '../modal/modal.service';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(
    private dataService: DataService,
    private sharedService: SharedService,
    private modalService: ModalService) { }

  date: Date;
  stateWiseData: any;
  stateName: string;
  selectedState: any;
  states: any;
  population: number;
  totalTested: number;
  deltaTested: number;
  totalConfirmed: number;
  deltaConfirmed: number;
  totalRecovered: number;
  deltaRecovered: number;
  totalDeceased: number;
  deltaDeceased: number;
  totalMigrated: number;

  @ViewChild('btnShowModal', { static: false }) btnShowModal: ElementRef<HTMLElement>;

  ngOnInit() {
    this.selectedState = null;
    this.date = new Date();
    this.getStateData();
    this.getStates();
  }

  openModal(id: string) {
    this.modalService.open(id);
  }

  closeModal(id: string) {
    this.modalService.close(id);
  }

  getStates() {
    this.states = this.dataService.getStates();
  }

  getStateData() {
    this.dataService.getStateData().subscribe(
      response => {
        this.stateWiseData = response;
      }, error => {
      }
    );
  }

  report(stateCode: string, stateName: string) {
    this.selectedState = null;
    this.stateName = stateName;
    var data = this.stateWiseData[stateCode];
    this.population = (data?.meta?.population == undefined) ? 0 : data?.meta?.population;
    this.totalTested = (data?.total?.tested == undefined) ? 0 : data?.total?.tested;
    this.deltaTested = data?.delta?.tested;
    this.totalConfirmed = (data?.total?.confirmed == undefined) ? 0 : data?.total?.confirmed;
    this.deltaConfirmed = data?.delta?.confirmed;
    this.totalRecovered = (data?.total?.recovered == undefined) ? 0 : data?.total?.recovered;
    this.deltaRecovered = data?.delta?.recovered;
    this.totalDeceased = (data?.total?.deceased == undefined) ? 0 : data?.total?.deceased;
    this.deltaDeceased = data?.delta?.deceased;
    this.totalMigrated = (data?.total?.migrated == undefined) ? 0 : data?.total?.migrated;
    let covidData: CovidData = new CovidData();
    covidData.confirmed = data?.total?.confirmed;
    covidData.delta = data?.delta?.confirmed;
    covidData.state = stateName;
    this.sharedService.addLogs.next(covidData);
    let el: HTMLElement = this.btnShowModal.nativeElement;
    el.click();
  }
}

As I mentioned earlier, we have emitted the log data from the report method inside this class. This reporting method is triggered every time we click a state to get Covid status.

Whenever we click on the state in the Indian Map, we will add a log entry to the array variable in the shared service.

Replace the template file code with the below code.

home.component.html

<p class="row margin-class">  
    <p class="col-6">  
        <p>  
            <img src="../assets/india-map-img.png" alt="Covid-19 Tracker by Sarathlal" usemap="#Map" />  
            <map id="Map" name="Map" style="cursor: pointer;">  
                <area id="jammuKashmir" shape="poly" data-toggle="tooltip"  
                    coords="169,77,166,73,162,69,160,65,155,62,150,57,147,53,146,47,143,43,139,45,133,43,129,41,125,39,119,41,117,45,112,46,113,51,115,56,115,61,115,66,115,72,117,75,122,77,127,80,131,82,132,86,137,87,141,90,146,91,150,87,150,83,155,81,159,77,163,76"  
                    (click)="report('JK','Jammu & Kashmir');" title="Jammu & Kashmir" alt="Jammu & Kashmir">  
                <area id="ladakh" shape="poly"  
                    coords="125,36,121,33,120,31,121,28,117,28,113,25,111,22,104,21,102,16,105,12,111,9,114,5,120,5,124,5,128,3,135,2,142,2,148,3,150,7,155,7,155,12,159,16,165,18,169,19,169,24,174,27,179,29,179,34,185,32,190,32,196,30,200,27,205,28,209,28,213,24,215,29,221,29,225,32,226,37,226,44,223,49,219,51,215,54,215,59,212,62,205,62,206,67,204,71,204,76,211,77,210,81,211,85,214,89,208,91,203,95,199,88,198,89,195,91,196,95,192,93,190,92,193,88,189,87,187,88,185,86,185,84,182,83,178,83,173,82,171,81,168,77,167,74,165,72,162,68,159,65,156,63,152,59,149,55,147,50,145,45,140,45,137,46,132,44,127,41,126,38"  
                    title="Ladakh" (click)="report('LA','Ladakh')" alt="Ladakh">  
                <area id="himachalPradesh" shape="poly"  
                    coords="145,95,150,105,154,111,159,113,160,118,164,120,170,126,169,127,169,129,175,132,178,131,179,127,182,119,187,117,195,117,199,118,201,115,199,111,199,108,197,100,195,95,193,92,191,88,186,88,185,87,184,83,178,83,173,83,168,80,164,77,156,79,152,81,150,87,146,90,145,94,145,97"  
                    title="Himachal Pradesh" (click)="report('HP','Himachal Pradesh')" alt="Himachal Pradesh">  
                <area id="punjab" title="Punjab" shape="poly" alt="Punjab" (click)="report('PB','Punjab')"  
                    coords="123,119,116,126,115,131,117,136,121,137,125,138,127,138,132,139,134,141,134,143,135,147,137,146,138,144,140,143,147,142,150,143,151,143,153,140,153,137,157,135,162,132,164,130,165,127,159,125,163,121,160,116,158,112,153,111,152,107,149,105,149,100,147,97,145,92,141,93,140,96,134,96,131,98,127,101,127,108,125,111,127,112,128,113,127,116,123,117">  
                <area id="uttarakhand" title="Uttarakhand" shape="poly" alt="Uttarakhand"  
                    (click)="report('UT','Uttarakhand')"  
                    coords="178,141,179,147,181,148,183,149,185,148,188,146,190,146,193,150,196,152,198,153,196,157,198,159,201,159,204,162,208,163,213,165,216,165,218,167,219,166,219,163,223,158,224,154,226,147,233,139,233,134,225,130,222,130,221,127,221,125,218,123,215,121,213,122,210,121,208,118,207,116,205,113,203,112,201,116,201,119,199,119,197,118,192,117,186,117,182,119,180,124,178,129,177,133,178,135,180,136,178,139">  
                <area id="haryana" title="Haryana" shape="poly" alt="Haryana" (click)="report('HR','Haryana')"  
                    coords="123,142,124,146,124,149,125,150,128,150,131,151,132,152,137,152,139,158,139,164,142,169,145,170,147,174,147,180,149,182,152,177,153,175,156,178,160,176,164,176,162,182,162,184,169,183,173,178,172,175,169,170,165,168,163,167,162,164,164,162,166,161,166,155,166,150,167,144,168,141,172,137,175,135,176,133,174,131,170,131,169,127,167,124,173,131,165,126,163,124,165,127,165,129,163,131,160,133,159,135,155,135,152,137,152,141,151,143,148,142,144,142,139,143,137,145,134,145,133,141,130,138,125,137,122,139,122,141">  
                <area id="National" title="National Capital Territory of Delhi" shape="poly"  
                    alt="National Capital Territory of Delhi" (click)="report('DL','Delhi')"  
                    coords="164,164,163,167,165,169,167,170,169,169,169,167,169,165,168,164,166,161,163,162">  
                <area id="uttarPradesh" title="Uttar Pradesh" shape="poly" alt="Uttar Pradesh"  
                    (click)="report('UP','Uttar Pradesh')"  
                    coords="168,143,167,152,166,162,169,165,169,167,169,170,171,174,173,177,173,181,171,183,170,187,171,191,173,193,175,194,173,199,170,203,174,200,176,198,178,200,182,200,185,202,191,202,196,204,198,209,199,211,197,217,185,229,185,236,182,245,192,253,196,250,193,241,188,231,193,231,200,234,208,236,213,235,215,233,220,231,221,234,220,237,222,238,226,237,229,237,230,239,231,240,234,239,238,238,240,236,243,236,246,239,249,242,254,245,256,246,259,246,263,246,264,250,264,255,263,257,265,261,268,262,271,260,273,257,274,253,275,249,277,247,275,244,273,240,274,236,277,234,281,231,284,230,285,228,290,227,294,227,296,226,294,224,290,222,287,220,285,217,288,215,285,212,284,210,287,209,291,208,291,208,289,205,287,203,284,200,282,194,280,192,275,192,274,194,272,193,268,191,264,190,262,187,257,186,251,184,245,182,241,179,238,176,237,173,231,170,227,167,222,167,217,168,211,165,206,164,199,160,196,157,196,155,195,152,191,148,188,146,184,147,182,149,178,146,177,142,179,139,179,137,177,134,175,135,174,138,171,139">  
                <area id="rajasthan" title="Rajasthan" shape="poly" alt="Rajasthan" (click)="report('RJ','Rajasthan')"  
                    coords="79,167,76,173,69,173,63,174,58,176,55,174,54,171,54,168,47,171,40,178,38,180,36,182,33,186,33,190,36,194,40,195,44,196,44,201,41,206,43,211,44,212,47,212,49,212,51,217,51,219,56,229,57,231,60,234,65,236,71,237,73,237,77,238,83,241,87,243,92,243,95,243,93,247,92,248,95,251,97,251,98,254,97,255,96,256,99,258,99,261,102,264,106,266,108,268,110,270,114,271,117,269,117,268,116,267,116,265,119,263,121,262,122,258,123,254,122,249,121,246,121,242,123,239,125,237,129,234,131,233,131,236,129,239,130,240,135,240,138,241,139,241,141,243,141,246,138,247,139,250,140,253,137,254,133,255,134,258,137,258,141,255,144,253,146,251,149,250,154,251,156,252,159,253,159,251,158,248,158,246,162,246,162,245,162,243,160,240,160,236,164,236,167,236,169,233,168,229,161,230,158,230,157,230,155,228,154,224,153,221,157,219,160,217,161,215,165,213,169,211,172,209,176,208,180,206,181,205,183,204,183,202,181,201,177,200,173,202,171,204,169,203,170,200,172,199,172,197,173,195,172,192,170,190,170,187,170,184,166,186,163,186,161,186,161,184,162,182,162,179,162,176,160,177,158,179,157,180,155,178,154,177,152,179,151,181,150,183,150,184,148,183,146,181,146,179,146,177,145,173,144,171,142,169,140,168,139,165,138,162,138,158,137,155,136,154,133,153,130,152,127,151,123,151,124,148,123,145,122,142,121,139,118,138,117,136,115,134,112,135,109,136,106,135,104,139,103,145,100,150,98,153,93,156,88,157,85,159,83,162,81,165">  
                <area id="gujarat" title="Gujarat" shape="poly" alt="Gujarat" (click)="report('GJ','Gujarat')"  
                    coords="7,254,10,258,12,261,15,263,16,265,19,266,21,267,25,268,29,268,31,268,35,268,37,266,40,264,42,263,44,264,43,266,41,269,41,270,40,272,38,274,36,274,33,274,31,275,29,277,27,278,23,278,21,278,19,278,18,276,15,275,13,275,13,278,17,283,18,285,23,291,25,292,26,294,28,297,30,299,31,300,32,301,37,306,39,308,40,309,42,310,46,306,53,308,51,310,53,310,55,310,57,309,59,308,62,306,64,306,68,304,70,303,72,301,73,299,73,297,74,294,74,291,74,288,75,285,77,284,78,283,80,283,80,288,79,293,79,296,81,297,83,297,80,301,79,304,87,312,83,312,82,315,80,319,83,320,84,320,85,321,86,319,86,319,86,320,87,320,89,321,90,321,90,318,90,315,93,317,95,318,96,318,99,317,100,315,100,312,99,310,97,308,98,307,100,306,102,304,105,303,107,302,106,301,102,301,101,301,100,299,100,297,103,294,105,294,105,292,105,290,105,287,105,285,107,284,108,283,107,283,107,281,110,280,111,279,113,278,113,277,113,276,111,273,110,270,107,268,107,266,103,265,101,264,98,260,98,258,96,256,97,254,98,252,95,251,92,250,92,248,94,246,94,243,90,242,88,244,85,243,82,240,77,238,74,237,68,237,64,236,59,235,57,235,57,237,58,239,58,240,56,240,54,242,52,243,51,243,49,242,49,241,49,239,47,238,43,238,42,239,40,240,38,241,35,241,32,241,32,241,30,239,26,239,23,238,20,238,18,238,17,237,14,237,14,239,13,242,13,243,10,243,7,243,5,242,3,243,1,245,0,247,0,248,0,250,2,250,4,250,5,250,7,251,7,252">  
                <area id="madhyaPradesh" title="Madhya Pradesh" shape="poly" alt="Madhya Pradesh"  
                    (click)="report('MP','Madhya Pradesh')"  
                    coords="159,218,154,222,155,228,156,229,162,230,164,230,167,229,168,230,169,233,169,235,166,236,161,236,160,236,159,239,160,241,161,242,162,243,162,245,162,247,160,247,158,247,157,251,158,253,156,254,154,252,151,251,148,251,145,252,143,254,140,257,137,258,134,258,133,255,133,254,136,254,138,254,139,254,139,251,139,249,140,246,141,244,141,242,138,241,134,241,131,240,129,239,130,236,131,234,128,233,126,237,124,239,121,241,120,243,120,246,121,250,122,253,122,256,122,259,122,261,120,263,118,264,118,268,117,269,115,270,115,271,112,271,111,273,112,275,113,276,113,278,111,280,107,282,106,282,108,284,107,286,105,288,106,290,106,293,106,294,107,294,108,294,110,293,111,293,113,294,114,297,114,299,114,300,117,300,119,300,121,300,124,303,125,304,128,305,130,305,133,305,135,305,138,305,139,306,141,307,141,309,143,311,145,311,147,311,149,310,151,307,152,305,153,303,155,302,157,301,160,301,162,301,164,300,167,302,166,304,165,305,165,307,168,307,171,307,173,307,176,306,179,305,182,303,185,304,187,306,189,306,191,307,192,306,195,305,197,304,199,304,201,305,204,306,207,306,210,306,212,306,215,306,218,307,221,310,222,311,223,311,224,310,225,306,225,303,226,299,228,297,230,295,232,293,232,291,233,289,235,288,238,288,240,287,242,286,245,283,247,281,248,278,250,277,251,276,251,274,250,272,248,270,246,269,242,268,242,267,243,265,243,264,243,262,246,261,250,262,253,262,256,264,258,264,260,262,260,261,262,261,263,261,263,260,263,256,263,253,263,250,263,248,261,246,258,246,256,246,253,246,250,243,248,241,244,238,241,237,238,237,236,239,233,240,229,239,228,238,225,238,222,239,220,239,220,237,220,236,221,234,219,233,218,233,215,234,212,236,209,236,204,236,201,236,198,235,194,233,191,232,191,233,191,236,192,239,193,241,193,243,194,245,195,246,196,248,197,250,196,252,194,253,192,253,191,252,189,251,187,249,186,251,185,251,183,249,182,246,181,242,182,240,183,239,184,237,184,234,185,231,185,228,188,225,190,225,191,223,193,222,195,220,196,218,198,213,198,211,198,209,197,207,195,205,192,204,189,204,187,204,184,204,181,206,179,207,174,208,170,210,167,211,161,215,161,216">  
                <area id="bihar" title="Bihar" shape="poly" alt="Bihar" (click)="report('BR','Bihar')"  
                    coords="280,232,274,237,273,238,273,241,275,243,276,245,276,247,277,250,279,251,281,252,283,251,285,250,286,250,287,252,289,252,291,251,292,253,292,255,294,256,296,255,299,253,301,252,303,254,305,254,309,252,313,251,314,249,317,247,320,246,323,248,324,251,325,253,327,254,329,254,330,251,333,250,336,250,338,248,339,245,340,241,342,238,346,236,348,235,351,236,352,236,351,232,354,230,357,228,354,225,351,222,353,218,356,216,357,215,358,213,358,208,353,212,351,212,345,212,342,213,340,210,336,210,331,211,323,208,319,208,317,208,314,208,315,205,314,204,310,205,308,205,305,203,302,202,300,202,298,200,297,196,296,194,295,194,291,192,288,191,284,191,282,193,282,195,283,199,284,201,286,203,289,205,290,206,291,208,290,209,286,210,285,211,287,213,287,215,286,217,288,220,290,222,293,224,294,224,295,226,294,228,290,227,287,228,285,230,282,230">  
                <area id="sikkim" title="Sikkim" shape="poly" alt="Sikkim" (click)="report('SK','Sikkim')"  
                    coords="357,186,355,194,355,196,356,198,358,199,360,198,361,198,363,197,366,196,367,196,369,196,370,194,369,192,368,189,369,187,370,184,369,179,368,178,366,177,362,179,359,180,357,181,357,184,356,187,356,190,355,191">  
                <area id="westBengal" title="West Bengal" shape="poly" alt="West Bengal"  
                    (click)="report('WB','West Bengal')"  
                    coords="357,200,359,205,357,207,358,209,359,212,358,214,356,216,354,217,352,219,351,221,354,225,355,225,356,228,355,230,352,231,352,233,352,235,353,238,353,247,352,252,351,256,343,261,342,262,337,263,335,264,333,266,331,267,328,269,326,270,324,269,321,270,319,271,319,274,321,275,322,277,326,277,327,279,329,280,330,281,331,284,333,286,335,288,336,289,336,290,336,293,336,294,339,297,340,299,340,300,342,300,344,299,345,300,347,303,349,304,351,304,353,302,355,301,356,299,357,298,358,296,359,294,360,293,361,298,362,299,364,300,366,298,367,296,368,295,370,293,372,292,375,291,375,290,375,286,374,282,373,276,373,273,370,270,369,268,366,266,367,261,370,257,370,255,370,253,369,252,368,251,366,251,360,249,359,249,358,247,356,243,359,240,361,240,363,240,364,237,364,234,371,234,372,232,369,228,365,228,363,227,363,225,358,222,358,219,361,217,362,213,364,210,367,211,367,213,368,214,369,214,371,212,373,211,376,215,377,217,380,218,382,218,383,216,384,214,386,213,387,209,387,206,386,205,382,204,377,203,373,201,371,199,369,197,366,197,363,198,358,199">  
                <area id="assam" title="Assam" shape="poly" alt="Assam" (click)="report('AS','Assam')"  
                    coords="388,206,388,213,388,216,388,219,388,221,388,224,388,227,389,226,390,223,392,221,393,221,394,221,398,219,402,220,405,220,407,220,409,222,411,223,414,224,415,222,417,221,418,219,420,219,422,219,425,218,429,218,431,218,429,221,429,223,433,224,436,224,438,226,439,228,440,231,437,232,436,235,436,237,436,238,435,239,433,242,432,245,430,247,430,249,431,250,433,251,435,252,437,251,438,248,439,246,440,246,441,246,443,245,445,243,446,239,446,237,449,233,450,231,450,229,450,227,449,225,451,221,454,219,455,218,457,219,458,219,459,216,459,213,460,210,462,208,466,204,468,203,472,201,474,199,476,197,479,194,481,192,483,192,485,190,488,189,491,187,491,183,490,180,489,179,489,177,487,177,481,177,476,179,472,181,469,183,465,185,463,186,461,188,459,191,458,194,456,196,453,198,447,199,444,200,439,200,438,200,436,199,433,200,430,201,426,202,422,202,416,203,409,204,405,204,402,204,401,203,399,202,398,201,396,201,394,202,392,203,389,204,388,204,387,205">  
                <area id="meghalaya" title="Meghalaya" shape="poly" alt="Meghalaya" (click)="report('ML','Meghalaya')"  
                    coords="388,226,388,231,391,231,394,232,396,233,400,233,403,233,407,233,412,234,417,234,421,234,425,233,428,233,431,233,434,235,436,235,437,233,437,231,439,230,438,229,436,228,436,225,432,224,428,224,429,221,429,218,424,219,419,221,416,223,413,224,411,223,408,222,407,221,404,221,399,221,395,221,392,222,389,224">  
                <area id="tripura" title="Tripura" shape="poly" alt="Tripura" (click)="report('TR','Tripura')"  
                    coords="416,256,414,260,414,262,416,265,416,267,416,271,416,273,418,271,418,269,420,270,420,272,420,274,421,275,423,275,424,274,425,272,424,269,425,267,426,265,426,263,426,261,428,260,429,262,431,261,432,260,432,258,432,255,431,252,428,248,425,250,425,252,423,252,421,253,420,254,418,254,418,254">  
                <area id="mizoram" title="Mizoram" shape="poly" alt="Mizoram" (click)="report('MZ','Mizoram')"  
                    coords="433,252,433,259,434,263,435,268,435,271,435,274,436,276,437,278,438,280,439,283,440,286,440,289,440,291,442,291,443,290,445,291,446,293,448,293,448,289,450,288,451,287,451,286,451,283,450,279,449,275,448,273,451,272,453,273,453,271,454,268,454,265,454,262,453,260,452,257,452,254,450,252,447,252,445,251,444,249,444,247,442,246,440,246,437,249,436,250">  
                <area id="arunachalPradesh" title="Arunachal Pradesh" shape="poly" alt="Arunachal Pradesh"  
                    (click)="report('AR','Arunachal Pradesh')"  
                    coords="418,184,419,189,420,189,422,190,425,189,426,190,426,192,426,194,426,196,427,197,428,199,428,200,432,200,436,199,438,198,440,198,443,199,448,198,451,198,455,196,457,195,458,192,461,189,462,186,465,185,468,183,472,182,476,180,478,179,480,178,484,177,486,176,488,175,490,175,491,177,490,180,490,181,490,182,491,184,492,186,493,187,494,188,495,188,499,187,502,186,503,185,504,184,507,185,509,186,510,187,512,188,513,188,514,188,513,185,511,182,509,181,508,179,509,177,510,175,512,174,513,173,516,172,516,171,516,169,515,166,513,164,511,164,509,165,507,165,504,163,502,163,500,164,498,166,496,165,497,161,499,160,501,158,501,156,499,154,496,152,495,154,494,156,492,152,494,150,496,149,494,147,491,147,489,146,487,147,482,149,481,153,481,154,479,154,475,153,471,153,469,152,466,151,463,152,460,154,459,156,455,160,454,161,452,163,451,163,447,164,445,164,444,167,442,169,440,172,438,174,437,175,437,177,436,179,435,180,429,182,424,183,420,184,418,183">  
                <area id="nagaland" title="Nagaland" shape="poly" alt="Nagaland" (click)="report('NL','Nagaland')"  
                    coords="464,206,461,211,460,213,460,215,459,218,459,219,456,219,455,219,453,219,452,220,450,223,450,225,450,228,451,229,453,230,454,230,456,229,457,226,458,224,459,224,462,224,464,224,466,224,468,222,469,221,470,223,471,225,473,223,475,221,477,220,478,218,479,215,480,212,480,210,480,207,479,205,479,202,481,201,483,200,486,197,489,194,491,192,494,190,495,188,491,188,486,190,483,191,479,193,477,195,473,198,471,200,468,202,466,203,465,206">  
                <area id="manipur" title="Manipur" shape="poly" alt="Manipur" (click)="report('MN','Manipur')"  
                    coords="448,236,445,242,445,243,445,245,444,246,443,247,444,249,445,251,447,252,449,252,451,251,452,250,453,251,455,251,456,251,458,250,460,251,462,251,463,251,464,253,465,253,466,253,467,251,468,249,468,246,469,243,470,241,471,239,472,237,473,235,474,233,474,231,474,230,473,229,472,227,472,224,469,223,468,223,465,224,462,224,458,224,457,225,456,227,456,229,455,230,453,230,452,229,451,229,450,231,449,232,449,233">  
                <area id="jharkhand" title="Jharkhand" shape="poly" alt="Jharkhand" (click)="report('JH','Jharkhand')"  
                    coords="274,257,277,260,278,263,281,266,282,268,284,268,285,268,285,270,285,271,284,274,286,277,288,278,289,280,290,280,290,282,288,285,287,287,288,289,290,291,291,291,293,291,296,290,299,290,301,290,303,289,304,288,305,290,306,293,305,294,304,295,305,297,307,297,309,296,310,295,311,295,313,294,317,296,319,298,320,298,321,296,322,294,322,291,322,288,322,287,326,288,327,290,329,291,330,292,331,291,332,291,334,292,335,292,336,290,334,288,331,285,330,283,330,280,328,279,325,278,322,277,320,274,319,272,321,270,323,269,328,270,329,268,333,265,335,264,337,263,339,262,341,262,342,261,344,259,345,258,347,257,349,255,350,254,351,251,352,247,353,245,353,242,353,239,353,238,351,237,347,236,345,236,342,238,340,243,339,247,337,249,331,251,329,252,328,254,327,254,324,251,323,249,322,247,319,247,314,250,312,251,309,253,307,253,305,254,303,254,301,252,300,252,298,253,295,256,293,256,292,254,291,252,286,252,281,251,275,251,275,250,274,253,273,254,274,255">  
                <area id="chhattisgarh" title="Chhattisgarh" shape="poly" alt="Chhattisgarh"  
                    (click)="report('CT','Chhattisgarh')"  
                    coords="231,295,225,302,225,305,225,309,224,311,223,314,219,315,221,319,222,323,221,324,223,328,222,329,219,331,218,333,220,334,221,335,220,338,220,340,222,340,223,341,224,343,226,345,227,347,226,349,225,350,222,349,221,348,218,350,216,352,216,354,217,358,215,359,215,361,215,362,217,362,220,363,221,363,223,367,224,370,225,371,226,372,227,373,228,378,229,379,231,379,233,378,234,378,235,375,236,372,237,370,238,369,240,368,242,367,244,365,245,364,246,362,248,359,249,357,250,355,250,352,250,350,249,347,247,345,248,344,248,342,246,339,244,337,244,335,246,334,249,335,250,336,251,338,252,337,253,338,254,339,257,339,259,339,259,340,260,337,259,335,256,335,254,334,255,331,256,329,254,325,254,322,254,320,254,318,255,318,257,318,258,317,259,315,259,313,261,313,264,313,266,313,267,313,269,313,270,312,271,310,273,307,275,303,277,302,277,299,277,298,277,297,276,295,279,293,282,292,284,291,285,289,286,287,287,286,288,285,289,283,289,280,288,278,287,277,286,276,285,275,285,273,285,270,285,268,284,268,282,267,280,266,279,264,278,262,276,260,276,259,275,258,272,259,271,260,270,262,269,262,267,262,266,261,265,261,264,261,262,261,261,262,260,263,258,264,257,264,254,263,253,263,251,262,248,262,245,262,243,263,242,265,242,266,242,267,244,267,247,269,248,270,250,271,251,273,251,274,251,276,250,278,248,280,244,283,242,286,240,288,238,288,234,288,233,289,232,290,230,293">  
                <area id="Odisha" title="Odisha" shape="poly" alt="Odisha" (click)="report('OR','Odisha')"  
                    coords="269,313,264,313,261,313,260,313,259,314,259,316,258,318,255,319,254,322,253,325,254,327,255,329,255,332,254,334,255,335,258,335,260,336,260,338,260,340,258,340,256,339,253,338,251,337,249,336,248,335,245,335,244,336,245,338,247,340,247,341,248,342,248,345,250,350,250,351,250,354,250,356,250,357,249,359,248,362,247,363,242,367,241,369,238,370,237,371,235,374,235,376,234,378,234,379,237,379,240,378,242,378,244,377,245,376,247,375,250,375,251,376,252,375,253,372,253,371,254,368,255,366,257,367,257,369,258,371,259,370,261,368,262,368,263,369,265,369,267,367,267,366,265,363,267,361,271,360,273,358,276,355,281,357,281,359,282,360,283,360,285,361,287,362,289,361,291,360,292,359,293,357,295,356,296,355,297,355,300,352,302,351,303,349,306,340,313,337,313,337,315,340,320,340,323,339,325,339,327,338,328,337,329,335,330,333,331,332,332,331,332,331,335,331,332,330,333,330,333,325,334,320,338,320,340,322,340,321,340,319,339,317,338,315,337,313,337,311,339,309,340,309,343,308,346,307,347,307,348,306,349,305,349,303,346,302,344,300,343,300,341,300,340,299,338,296,336,295,335,293,335,293,335,293,331,292,330,292,327,290,326,289,324,287,322,294,321,298,320,299,319,299,318,297,315,295,313,295,312,294,309,295,308,296,307,297,305,298,303,296,304,295,304,293,305,292,305,290,304,288,303,288,299,290,296,290,293,291,289,291,288,290,286,288,286,288,285,290,284,291,281,292,279,293,277,294,276,296,276,299,275,302,274,305,273,308,272,310,273,311,271,312">  
                <area id="maharashtra" title="Maharashtra" shape="poly" alt="Maharashtra"  
                    (click)="report('MH','Maharashtra')"  
                    coords="77,335,77,344,79,367,82,390,83,402,85,407,85,409,86,410,87,410,90,409,91,411,92,413,93,413,94,413,96,412,99,410,101,409,101,407,101,404,101,403,99,400,98,397,100,395,102,394,104,395,108,394,111,392,112,390,114,389,115,390,117,391,120,389,123,389,124,389,126,388,126,386,126,382,126,379,128,379,130,380,132,381,135,382,137,383,141,383,141,381,142,377,144,375,147,375,148,376,149,373,149,371,152,371,153,371,154,369,154,368,160,365,162,363,164,361,166,360,167,358,169,356,170,355,170,354,170,353,169,351,169,349,171,348,171,345,174,345,175,346,177,345,179,343,180,342,180,338,181,335,183,337,185,337,187,337,189,337,190,339,191,341,192,343,193,344,195,344,196,343,197,342,199,343,201,344,203,344,205,343,206,343,207,344,209,345,209,347,210,349,210,352,209,354,209,355,210,359,211,360,213,361,215,360,216,358,216,357,216,355,215,353,216,352,217,350,218,349,220,349,222,349,224,349,225,350,226,349,227,347,226,346,225,344,223,343,220,341,219,340,220,337,220,335,219,333,218,331,219,330,221,329,222,328,222,326,222,323,222,321,221,318,220,317,219,315,219,314,221,313,222,313,221,310,220,309,218,308,216,306,211,306,208,306,204,305,202,305,200,304,197,304,194,305,192,306,189,306,185,305,183,304,180,305,176,308,173,308,168,308,165,307,165,306,166,304,166,302,164,301,160,301,157,301,153,304,152,306,151,308,148,311,147,312,143,312,142,311,141,309,140,307,139,306,131,305,129,305,126,304,124,303,122,302,121,300,119,300,117,300,114,300,113,299,112,294,111,293,109,294,107,294,103,295,102,295,100,296,100,298,100,300,101,301,104,301,106,301,107,302,105,303,103,304,101,305,97,308,100,312,100,313,100,314,100,317,99,319,97,319,95,319,92,318,92,317,91,317,90,320,89,324,89,325,89,327,87,329,84,330,83,331,82,329,81,328,81,326,80,323,80,322,78,323,77,326,77,329,77,332,76,335">  
                <area id="goa" title="Goa" shape="poly" alt="Goa" (click)="report('GA','Goa')"  
                    coords="87,412,91,419,92,424,93,427,93,428,93,429,95,427,96,426,97,425,97,423,97,421,97,420,97,417,97,415,97,413,96,413,94,413,92,413,91,412,90,411,88,410,87,410">  
                <area id="karnataka" title="Karnataka" shape="poly" alt="Karnataka" (click)="report('KA','Karnataka')"  
                    coords="95,428,99,436,102,445,103,450,104,456,104,459,105,462,105,465,106,467,107,468,109,470,112,472,113,474,115,476,117,478,118,480,122,483,126,486,128,487,130,487,132,488,134,491,137,492,140,494,141,494,143,493,144,491,146,490,149,490,151,491,152,491,154,491,155,490,156,489,158,488,160,487,161,486,161,483,159,483,156,482,157,480,160,478,160,475,161,474,162,473,163,471,166,470,168,471,171,471,173,470,175,468,176,467,177,464,178,462,178,461,175,461,174,459,174,456,171,456,169,455,168,451,164,449,161,451,157,453,156,450,152,450,150,451,149,452,148,452,148,450,149,447,149,446,147,444,147,443,147,440,148,438,146,436,145,434,145,431,146,430,146,428,147,427,151,427,153,427,153,425,153,423,151,420,151,418,151,416,152,414,151,410,153,410,154,410,159,411,160,410,160,409,160,408,160,406,161,405,162,404,159,402,156,402,156,401,158,399,160,398,160,395,160,393,161,392,161,388,160,387,159,385,161,384,163,382,165,381,163,379,161,379,161,378,163,376,166,372,166,370,165,367,164,366,164,363,164,362,158,364,156,365,154,367,152,369,150,370,147,372,144,374,142,375,141,378,141,382,139,383,133,381,128,378,127,383,127,385,125,388,122,388,117,389,114,388,113,388,111,390,110,392,108,393,103,393,101,393,100,394,99,396,99,399,100,400,101,402,102,404,100,408,98,409,96,411,97,414,98,416,98,420,96,426">  
                <area id="kerala" title="Kerala" shape="poly" alt="Kerala" (click)="report('KL','Kerala')"  
                    coords="118,490,125,497,124,506,128,520,129,523,132,528,134,530,135,535,135,537,134,538,133,539,133,541,134,545,140,555,142,557,145,560,146,562,147,562,147,560,148,558,148,557,148,555,148,553,148,551,149,549,148,546,149,542,150,541,152,538,152,537,149,537,148,535,149,531,150,528,151,524,150,522,146,523,144,524,142,520,143,517,143,513,143,511,140,510,138,508,139,507,140,506,139,505,135,504,135,503,136,501,135,500,132,496,134,495,135,493,127,490,125,489,122,487,119,484,117,481,114,477,111,474,107,471,109,477,109,478,110,481,111,483">  
                <area id="tamilnadu" title="Tamilnadu" shape="poly" alt="Tamilnadu" (click)="report('TN','Tamilnadu')"  
                    coords="134,494,133,498,135,499,136,500,136,502,135,502,137,503,139,503,140,504,140,506,139,508,141,509,143,510,144,513,143,517,142,520,143,522,146,523,149,521,151,522,151,526,150,529,149,534,151,535,152,536,152,539,150,543,148,550,149,555,148,557,148,558,148,560,148,561,149,563,150,563,152,564,155,564,158,564,160,562,161,561,163,560,165,559,166,558,167,556,167,553,168,551,169,549,170,546,171,545,176,544,179,544,181,542,183,541,184,541,186,541,186,541,185,539,183,538,183,536,184,534,186,532,188,530,189,529,190,527,190,524,190,522,192,521,194,521,196,521,199,521,200,521,201,521,202,521,202,519,202,519,202,515,202,514,201,514,200,514,199,513,199,512,198,511,198,510,198,509,198,509,200,508,201,508,202,508,202,507,202,505,202,502,202,499,202,496,197,494,197,493,196,492,196,491,196,490,197,488,198,487,199,487,201,488,201,489,202,489,202,489,203,487,203,486,207,481,208,479,209,477,210,475,211,472,212,470,212,468,213,466,213,464,213,463,212,462,212,460,210,460,208,460,206,460,204,462,203,464,203,465,201,466,199,465,198,464,195,464,193,465,191,468,191,469,188,469,186,468,184,468,181,468,179,468,178,471,178,473,177,476,174,477,171,476,170,475,170,473,166,472,163,472,161,473,160,475,159,478,159,480,157,481,158,483,160,483,162,484,161,487,159,489,157,491,156,492,152,493,150,492,147,492,144,494,143,495,141,496,137,495,135,493">  
                <area title="Puducherry (Pondicherry)" shape="poly" alt="Puducherry (Pondicherry)"  
                    (click)="report('PY','Puducherry')"  
                    coords="119,492,123,496,124,498,124,500,124,502,124,503,123,503,123,503,121,501,121,501,120,499,120,498,119,496,118,495,117,493,118,492">  
                <area shape="poly" alt="Puducherry (Pondicherry)" alt="Puducherry (Pondicherry)"  
                    (click)="report('PY','Puducherry')"  
                    coords="201,509,198,512,199,514,200,515,202,515,203,514,203,513,203,511,203,509">  
                <area title="Puducherry (Pondicherry)" shape="poly" alt="Puducherry (Pondicherry)"  
                    (click)="report('PY','Puducherry')"  
                    coords="198,488,196,491,196,492,197,493,198,495,199,496,200,497,201,497,202,496,203,494,203,492,202,490,201,488,200,488">  
                <area title="Puducherry (Pondicherry)" shape="poly" alt="Puducherry (Pondicherry)"  
                    (click)="report('PY','Puducherry')"  
                    coords="249,395,248,398,248,401,248,404,250,403,252,402,253,400,254,398,254,396,254,394,254,392">  
                <area title="Daman and Diu" shape="poly" alt="Daman and Diu" (click)="report('DD','Daman and Diu')"  
                    coords="80,305,83,308,84,311,82,313,82,315,81,313,81,310,80,307,80,304">  
                <area title="Dadra and Nagar Haveli" shape="poly" alt="Dadra and Nagar Haveli"  
                    (click)="report('DN','Dadra and Nagar Haveli')"  
                    coords="79,322,81,326,81,328,82,329,82,330,84,330,85,330,86,329,87,328,88,327,89,326,89,324,89,322,89,321,88,320,87,320,85,320,82,320,81,320,79,320">  
                <area title="Diu" shape="poly" alt="Diu" (click)="report('DD','Daman and Diu')"  
                    coords="46,307,43,310,43,311,44,311,46,311,48,311,50,311,51,311,52,310,52,309,49,308,48,307">  
                <area title="Chandigarh" shape="poly" alt="Chandigarh" (click)="report('CH','Chandigarh')"  
                    coords="162,119,160,125,163,126,165,127,167,127,169,126,166,124,163,120">  
                <area title="Lakshadweep" shape="poly" alt="Lakshadweep" (click)="report('LD','Lakshadweep')"  
                    coords="42,475,40,482,38,487,39,494,44,495,49,502,47,508,45,511,46,518,48,522,54,523,62,557,67,556,68,535,67,523,82,525,85,520,84,516,80,514,69,511,66,505,68,501,73,497,75,491,73,486,67,481,57,479,54,475,53,468,47,468,42,472">  
                <area id="andamanNicobar" title="Andaman and Nicobar Islands" shape="poly"  
                    alt="Andaman and Nicobar Islands" (click)="report('AN','Andaman and Nicobar Islands')"  
                    coords="452,451,448,461,447,473,446,482,435,485,434,492,439,505,446,516,446,525,449,534,447,545,450,553,454,559,459,572,468,577,472,580,474,585,479,589,483,589,484,585,482,579,480,573,476,568,477,561,476,556,471,552,464,550,461,544,459,536,457,524,457,512,459,497,462,493,469,493,476,491,479,485,478,479,472,474,467,467,466,458,469,453,472,446,473,437,473,428,467,428,458,431,451,442,452,451">  
                <area id="andhraPradesh" title="Andhra Pradesh" shape="poly" alt="Andhra Pradesh"  
                    (click)="report('AP','Andhra Pradesh')"  
                    coords="213,461,213,456,213,451,212,448,211,443,213,441,213,435,212,430,212,425,214,420,217,415,221,413,226,413,228,415,230,413,233,408,235,405,239,405,243,406,249,404,248,399,249,394,251,391,256,391,262,387,269,385,271,381,275,376,283,371,288,368,291,364,295,358,299,354,289,360,286,361,281,358,277,356,273,360,268,361,267,365,267,367,266,370,263,368,258,371,258,366,256,368,253,374,251,377,247,376,243,378,238,379,236,379,234,384,227,387,224,391,221,392,217,391,214,394,210,393,206,393,206,398,202,399,196,399,193,403,190,407,185,407,184,410,179,410,174,411,173,413,170,414,166,412,161,412,152,413,152,417,152,420,153,424,154,426,153,429,148,429,148,432,146,435,147,439,149,441,148,443,150,445,153,443,157,442,158,443,159,446,157,449,157,453,157,455,161,453,165,451,168,453,170,457,174,457,175,461,178,463,179,466,176,470,172,473,171,475,174,478,178,477,179,474,179,471,182,469,186,470,191,471,194,467,196,464,201,467,205,463,207,461">  
                <area id="telangana" title="Telangana" shape="poly" alt="Telangana" (click)="report('TG','Telangana')"  
                    coords="181,336,185,337,188,339,192,343,195,345,197,343,200,344,203,345,206,343,210,346,210,352,209,357,211,361,216,363,220,363,222,367,225,372,227,373,228,378,233,379,236,379,235,383,231,385,226,388,221,393,218,391,214,393,210,392,206,394,203,398,197,400,193,400,190,406,186,408,182,408,178,411,173,412,171,414,167,413,162,412,159,412,161,406,163,405,157,404,160,400,160,397,162,391,161,389,159,388,165,382,161,380,163,376,166,375,167,371,165,368,163,365,163,362,168,357,170,354,170,353,169,347,172,345,176,347,178,344,181,340"></map>  
        </p>  
    </p>  
</p>  
  
  
<my-modal id="custom-modal">  
    <p class="row margin-class">  
        <p>  
            <h6>State : </h6>  
        </p>  
        <p>  
            <h5><span class="badge badge-secondary"> {{stateName}}</span></h5>  
        </p>  
    </p>  
  
    <p class="row margin-class">  
        <p>  
            <h6>As on Date : </h6>  
        </p>  
        <p>  
            <h6><span class="badge badge-secondary">{{date |date}}</span></h6>  
        </p>  
    </p>  
  
    <h6>Population : {{population | number}}</h6>  
  
    <p class="row margin-class">  
        <p>  
            <h6>Tested : {{totalTested | number}} </h6>  
        </p>  
        <p *ngIf="deltaTested != undefined && deltaTested > 0">  
            <h6><span class="badge badge-info"> + {{deltaTested}}</span></h6>  
        </p>  
    </p>  
  
    <p class="row margin-class">  
        <p>  
            <h6>Confirmed : {{totalConfirmed | number}} </h6>  
        </p>  
        <p *ngIf="deltaConfirmed != undefined && deltaTested > 0">  
            <h6><span class="badge badge-warning"> + {{deltaConfirmed | number}}</span></h6>  
        </p>  
    </p>  
  
    <p class="row margin-class">  
        <p>  
            <h6>Recovered : {{totalRecovered | number}} </h6>  
        </p>  
        <p *ngIf="deltaRecovered != undefined && deltaRecovered > 0">  
            <h6><span class="badge badge-success"> + {{deltaRecovered | number}}</span></h6>  
        </p>  
    </p>  
  
    <p class="row margin-class">  
        <p>  
            <h6>Deceased : {{totalDeceased | number}} </h6>  
        </p>  
        <p *ngIf="deltaDeceased != undefined && deltaDeceased > 0">  
            <h6><span class="badge badge-danger"> + {{deltaDeceased | number}}</span></h6>  
        </p>  
    </p>  
  
    <h6>Migrated : {{totalMigrated | number}} </h6>  
    <button class="btn btn-secondary" (click)="closeModal('custom-modal');">Close</button>  
</my-modal>  
  
<button class="btn btn-lg btn-outline-primary" hidden #btnShowModal  
    (click)="openModal('custom-modal')">AlertModal</button>

Replace the style code with the below code.

home.component.css

.margin-class {
    margin: 0px;
}
.img {
    width: 40px;
}

We can create another component to get shared data from the home component.

ng generate component nav-menu

nav-menu.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { CovidData } from '../covid-data';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-nav-menu',
  templateUrl: './nav-menu.component.html',
  styleUrls: ['./nav-menu.component.css']
})
export class NavMenuComponent implements OnInit, OnDestroy {
  constructor(private sharedService: SharedService, private router: Router) { }
  addLogSubscription: Subscription;
  logs: Array<CovidData>;  
  ngOnInit(): void {
    this.addLogSubscription = this.sharedService.addLogs.subscribe(log => {
      this.sharedService.logs.push(log);
      this.logs = this.sharedService.logs;
    })
  }
  ngOnDestroy(): void {
    if (this.addLogSubscription) {
      this.addLogSubscription.unsubscribe();
    }
  }
  
  openHome() {
    this.router.navigateByUrl('/logs');
  }
}

We have added a subscription variable in this component. This subscription will always listen to the subject variable. Whenever the data is emitted from the first component, the subscription variable will automatically get that information and add it to another shared variable. We will show the log count as a notification on the navigation component.

Replace the template code with the below code.

nav-menu.component.html

<header>
    <nav class='navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3'>
        <p class="container">
            <a class="navbar-brand" [routerLink]='["/"]'>Indian Covid-19 App - Please click on any state in the Map</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <p class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                <ul class="navbar-nav flex-grow">
                    <li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
                        <a class="nav-link text-dark" [routerLink]='["/"]'>Home</a>
                    </li>
                    <li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
                        <a class="nav-link text-dark" [routerLink]='["/logs"]'>Logs</a>
                    </li>
                    <p class="numberCircle" *ngIf="logs && logs?.length>0" style="cursor: pointer;" (click)="openHome()">
                        {{logs.length}}
                    </p>
                </ul>
            </p>
        </p>
    </nav>
</header>
<footer>
    <nav class="navbar navbar-light bg-white mt-5 fixed-bottom">
        <p class="navbar-expand m-auto navbar-text">
            Developed by <b>Sarathlal Saseendran</b>
        </p>
    </nav>
</footer>

Replace the style code with the below code.

nav-menu.component.css

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

.numberCircle {
    border-radius: 50%;
    width: 21px;
    height: 21px;
    padding: 4px;
    background: #fff;
    border: 1px solid darkgrey;
    color: red;
    text-align: center;
    margin-left: -7px;
    font: 10px Arial, sans-serif;
}

We can create the final component for showing the logs.

ng generate component logs

Replace the component code with the below code.

logs.component.ts

import { Component, OnInit } from '@angular/core';
import { CovidData } from '../covid-data';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-logs',
  templateUrl: './logs.component.html',
  styleUrls: ['./logs.component.css']
})
export class LogsComponent implements OnInit {
  logs: Array<CovidData>;
  constructor(private sharedService: SharedService) { }
  ngOnInit(): void {
    this.logs = this.sharedService.logs;
  }
}

Replace the template code with the below code.

logs.component.html

<h3><span class="badge badge-success">Total Logs Details</span></h3>
<p *ngFor="let log of logs.reverse();">
    <h6>Selected State:
        <span class="badge badge-primary">{{log.state}}</span>
        Total Confirmed:
        <span class="badge badge-info">{{log.confirmed | number}}</span>
        <span class="badge badge-warning">+{{log.delta | number}}</span>
    </h6>
</p>

Replace AppModule with the below code.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ModalComponent } from './modal/modal.component';
import { HomeComponent } from './home/home.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { LogsComponent } from './logs/logs.component';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    ModalComponent,
    HomeComponent,
    NavMenuComponent,
    LogsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Replace AppRoutingModule with the below code.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LogsComponent } from './logs/logs.component';

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'logs', component: LogsComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Finally, we can replace the app component template code with the below code.

app.component.html

<body>
  <app-nav-menu></app-nav-menu>
  <p class="container">
    <router-outlet></router-outlet>
  </p>
</body>

We have completed the coding part. We can run the application now.

We can see the Indian Map in the home page. We can click on any state and see the COVID-19 status in a popup window.

You can notice that we will see a notification instantly near the logs tab in the navigation bar.

Whenever we click on each state, a log will be added to the shared variable and we can see that log in the logs page.

Conclusion

In this post, we have seen how to share data between two unrelated components in an Angular project. We have used a subject variable to emit data from one component and have used a subscription variable to receive the same data. We have created a COVID-19 application to explain these functionalities. In the first component, we have displayed an Indian Map. Users can click on any of the states on this Map. Whenever the user clicks on the state, COVID-19 status will be displayed on a modal popup window, and at the same time, we will show the log count information as a notification in the navigation menu bar near to logs tab.