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 subject variable.
 
We will subscribe this subject variable in 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 application will show the current Covid-19 status of that state in a popup window. Whenever user click on states, 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 below command to create new Angular project.
 
ng new AngularShareData
 
Above Angular CLI command will ask some questions before creating new project. We can opt the default options except routing. We will choose routing with this project. By default, it is not selected.
 
This will take few minutes to install required node packages to our project.
 
After completing the project creation, we can open this project folder in Visual Studio Code editor.
 
We must install bootstrap package to our project for some styling purposes.
 
npm install bootstrap
 
We can add below line of code inside the style.css file. So that, we can use bootstrap library in entire application, without any further reference.
 
style.css
  1. @import "~bootstrap/dist/css/bootstrap.css";   
In our Covid-19 app, we will display state name, confirmed case and delta (new confirmed case) as log. For this purpose, we need a model. We can create a model class using below command.
 
ng generate class covid-data
 
Add below code to this class file.
 
covid-data.ts
  1. export class CovidData {  
  2.     state: string;  
  3.     confirmed: number;  
  4.     delta: number;  
  5. }  
Now we can create our important service SharedService.
 
ng generate service shared
 
shared.service.ts
  1. import { Injectable } from '@angular/core';  
  2. import { Subject } from 'rxjs';  
  3. import { CovidData } from './covid-data';  
  4.   
  5. @Injectable({  
  6.   providedIn: 'root'  
  7. })  
  8. export class SharedService {  
  9.   
  10.   addLogs: Subject<CovidData>;  
  11.   logs: Array<CovidData>;  
  12.   
  13.   constructor() {  
  14.     this.addLogs = new Subject<CovidData>();  
  15.     this.logs = new Array<CovidData>();  
  16.   }  
  17. }  
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
  1. import { Injectable } from '@angular/core';    
  2. import { HttpClient } from '@angular/common/http'    
  3. import { Observable } from 'rxjs';    
  4. import { map } from 'rxjs/operators';    
  5.   
  6. @Injectable({    
  7.   providedIn: 'root'    
  8. })    
  9. export class DataService {    
  10.     
  11.   constructor(private http: HttpClient) { }    
  12.     
  13.   private states: any = [    
  14.     {    
  15.       "key""AN",    
  16.       "name""Andaman and Nicobar Islands"    
  17.     },    
  18.     {    
  19.       "key""AP",    
  20.       "name""Andhra Pradesh"    
  21.     },    
  22.     {    
  23.       "key""AR",    
  24.       "name""Arunachal Pradesh"    
  25.     },    
  26.     {    
  27.       "key""AS",    
  28.       "name""Assam"    
  29.     },    
  30.     {    
  31.       "key""BR",    
  32.       "name""Bihar"    
  33.     },    
  34.     {    
  35.       "key""CH",    
  36.       "name""Chandigarh"    
  37.     },    
  38.     {    
  39.       "key""CH",    
  40.       "name""Chhattisgarh"    
  41.     },    
  42.     {    
  43.       "key""DN",    
  44.       "name""Dadra and Nagar Haveli"    
  45.     },    
  46.     {    
  47.       "key""DL",    
  48.       "name""Delhi"    
  49.     },    
  50.     {    
  51.       "key""GA",    
  52.       "name""Goa"    
  53.     },    
  54.     {    
  55.       "key""GJ",    
  56.       "name""Gujarat"    
  57.     },    
  58.     {    
  59.       "key""HR",    
  60.       "name""Haryana"    
  61.     },    
  62.     {    
  63.       "key""HP",    
  64.       "name""Himachal Pradesh"    
  65.     },    
  66.     {    
  67.       "key""JK",    
  68.       "name""Jammu and Kashmir"    
  69.     },    
  70.     {    
  71.       "key""JH",    
  72.       "name""Jharkhand"    
  73.     },    
  74.     {    
  75.       "key""KA",    
  76.       "name""Karnataka"    
  77.     },    
  78.     {    
  79.       "key""KL",    
  80.       "name""Kerala"    
  81.     },    
  82.     {    
  83.       "key""LA",    
  84.       "name""Ladakh"    
  85.     },    
  86.     {    
  87.       "key""LD",    
  88.       "name""Lakshadweep"    
  89.     },    
  90.     {    
  91.       "key""MP",    
  92.       "name""Madhya Pradesh"    
  93.     },    
  94.     {    
  95.       "key""MH",    
  96.       "name""Maharashtra"    
  97.     },    
  98.     {    
  99.       "key""MN",    
  100.       "name""Manipur"    
  101.     },    
  102.     {    
  103.       "key""ML",    
  104.       "name""Meghalaya"    
  105.     },    
  106.     {    
  107.       "key""MZ",    
  108.       "name""Mizoram"    
  109.     },    
  110.     {    
  111.       "key""NL",    
  112.       "name""Nagaland"    
  113.     },    
  114.     {    
  115.       "key""OR",    
  116.       "name""Odisha"    
  117.     },    
  118.     {    
  119.       "key""PY",    
  120.       "name""Puducherry"    
  121.     },    
  122.     {    
  123.       "key""PB",    
  124.       "name""Punjab"    
  125.     },    
  126.     {    
  127.       "key""RJ",    
  128.       "name""Rajasthan"    
  129.     },    
  130.     {    
  131.       "key""SK",    
  132.       "name""Sikkim"    
  133.     },    
  134.     {    
  135.       "key""TN",    
  136.       "name""Tamil Nadu"    
  137.     },    
  138.     {    
  139.       "key""TG",    
  140.       "name""Telangana"    
  141.     },    
  142.     {    
  143.       "key""TR",    
  144.       "name""Tripura"    
  145.     },    
  146.     {    
  147.       "key""UP",    
  148.       "name""Uttar Pradesh"    
  149.     },    
  150.     {    
  151.       "key""UT",    
  152.       "name""Uttarakhand"    
  153.     },    
  154.     {    
  155.       "key""WB",    
  156.       "name""West Bengal"    
  157.     }    
  158.   ]    
  159.     
  160.   getStateData(): Observable<any> {    
  161.     let url = `https://api.covid19india.org/v4/min/data.min.json`    
  162.     return this.http.get(url).pipe(    
  163.       map(response => {    
  164.         return response;    
  165.       })    
  166.     );    
  167.   }    
  168.     
  169.   getStates(): any {    
  170.     return this.states;    
  171.   }    
  172. }    
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
  1. import { Injectable } from '@angular/core';    
  2.     
  3. @Injectable({  
  4.     providedIn: 'root'  
  5.   })  
  6. export class ModalService {    
  7.     private modals: any[] = [];    
  8.     
  9.     add(modal: any) {    
  10.         this.modals.push(modal);    
  11.     }    
  12.     
  13.     remove(id: string) {    
  14.         this.modals = this.modals.filter(x => x.id !== id);    
  15.     }    
  16.     
  17.     open(id: string) {    
  18.         const modal = this.modals.find(x => x.id === id);    
  19.         modal.open();    
  20.     }    
  21.     
  22.     close(id: string) {    
  23.         const modal = this.modals.find(x => x.id === id);    
  24.         modal.close();    
  25.     }    
  26. }    
Now, we can create modal component using below command.
 
ng generate component modal
 
Replace component class code with below code.
 
modal.component.ts
  1. import { Component, ViewEncapsulation, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';    
  2.     
  3. import { ModalService } from './modal.service';    
  4.     
  5. @Component({     
  6.     selector: 'my-modal',     
  7.     templateUrl: 'modal.component.html',     
  8.     styleUrls: ['modal.component.less'],    
  9.     encapsulation: ViewEncapsulation.None    
  10. })    
  11. export class ModalComponent implements OnInit, OnDestroy {    
  12.     @Input() id: string;    
  13.     private element: any;    
  14.     
  15.     constructor(private modalService: ModalService, private el: ElementRef) {    
  16.         this.element = el.nativeElement;    
  17.     }    
  18.     
  19.     ngOnInit(): void {    
  20.         if (!this.id) {    
  21.             console.error('modal must have an id');    
  22.             return;    
  23.         }    
  24.     
  25.         document.body.appendChild(this.element);    
  26.     
  27.         this.element.addEventListener('click', el => {    
  28.             if (el.target.className === 'my-modal') {    
  29.                 this.close();    
  30.             }    
  31.         });    
  32.     
  33.         this.modalService.add(this);    
  34.     }    
  35.     
  36.     ngOnDestroy(): void {    
  37.         this.modalService.remove(this.id);    
  38.         this.element.remove();    
  39.     }    
  40.     
  41.     open(): void {    
  42.         this.element.style.display = 'block';    
  43.         document.body.classList.add('my-modal-open');    
  44.     }    
  45.     
  46.     close(): void {    
  47.         this.element.style.display = 'none';    
  48.         document.body.classList.remove('my-modal-open');    
  49.     }    
  50. }    
Replace template code with below code.
 
modal.component.html
  1. <div class="my-modal">    
  2.     <div class="my-modal-body">    
  3.         <ng-content></ng-content>    
  4.     </div>    
  5. </div>    
  6. <div class="my-modal-background"></div>    
Please note, we are using less file instead of css file for component styling.
 
Replace style code with below code.
 
modal.component.less
  1. my-modal {    
  2.     displaynone;    
  3.     
  4.     .my-modal {    
  5.         positionfixed;    
  6.         top: 20%;    
  7.         right: 0;    
  8.         bottom: 0;    
  9.         left: 0;    
  10.     
  11.         z-index1000;    
  12.             
  13.         overflowauto;    
  14.     
  15.         .my-modal-body {    
  16.             padding20px;    
  17.             background#fff;    
  18.     
  19.             margin30px;   
  20.             width350px;    
  21.             height300px;    
  22.         }    
  23.     }    
  24.     
  25.     .my-modal-background {    
  26.         positionfixed;    
  27.         top: 0;    
  28.         right: 0;    
  29.         bottom: 0;    
  30.         left: 0;    
  31.     
  32.         background-color#000;    
  33.         opacity: 0.75;    
  34.             
  35.         z-index900;    
  36.     }    
  37. }    
  38.     
  39. body.my-modal-open {    
  40.     overflowhidden;    
  41. }    
Create a new component for displaying Indian Map and showing Covid-19 status for each state. We can name it as Home component.
 
ng generate component home
 
Replace component class code with below code.
 
home.component.ts
  1. import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';  
  2. import { CovidData } from '../covid-data';  
  3. import { DataService } from '../data.service';  
  4. import { ModalService } from '../modal/modal.service';  
  5. import { SharedService } from '../shared.service';  
  6.   
  7. @Component({  
  8.   selector: 'app-home',  
  9.   templateUrl: './home.component.html',  
  10.   styleUrls: ['./home.component.css']  
  11. })  
  12. export class HomeComponent implements OnInit {  
  13.   
  14.   constructor(  
  15.     private dataService: DataService,  
  16.     private sharedService: SharedService,  
  17.     private modalService: ModalService) { }  
  18.   
  19.   date: Date;  
  20.   stateWiseData: any;  
  21.   stateName: string;  
  22.   selectedState: any;  
  23.   states: any;  
  24.   population: number;  
  25.   totalTested: number;  
  26.   deltaTested: number;  
  27.   totalConfirmed: number;  
  28.   deltaConfirmed: number;  
  29.   totalRecovered: number;  
  30.   deltaRecovered: number;  
  31.   totalDeceased: number;  
  32.   deltaDeceased: number;  
  33.   totalMigrated: number;  
  34.   
  35.   @ViewChild('btnShowModal', { staticfalse }) btnShowModal: ElementRef<HTMLElement>;  
  36.   
  37.   ngOnInit() {  
  38.     this.selectedState = null;  
  39.     this.date = new Date();  
  40.     this.getStateData();  
  41.     this.getStates();  
  42.   }  
  43.   
  44.   openModal(id: string) {  
  45.     this.modalService.open(id);  
  46.   }  
  47.   
  48.   closeModal(id: string) {  
  49.     this.modalService.close(id);  
  50.   }  
  51.   
  52.   getStates() {  
  53.     this.states = this.dataService.getStates()  
  54.   }  
  55.   
  56.   getStateData() {  
  57.     this.dataService.getStateData().subscribe(  
  58.       response => {  
  59.         this.stateWiseData = response;  
  60.       }, error => {  
  61.       }  
  62.     );  
  63.   }  
  64.   
  65.   report(stateCode: string, stateName: string) {  
  66.     this.selectedState = null;  
  67.     this.stateName = stateName;  
  68.     var data = this.stateWiseData[stateCode];  
  69.     this.population = (data?.meta?.population == undefined) ? 0 : data?.meta?.population;  
  70.     this.totalTested = (data?.total?.tested == undefined) ? 0 : data?.total?.tested;  
  71.     this.deltaTested = data?.delta?.tested;  
  72.     this.totalConfirmed = (data?.total?.confirmed == undefined) ? 0 : data?.total?.confirmed;  
  73.     this.deltaConfirmed = data?.delta?.confirmed;  
  74.     this.totalRecovered = (data?.total?.recovered == undefined) ? 0 : data?.total?.recovered;  
  75.     this.deltaRecovered = data?.delta?.recovered;  
  76.     this.totalDeceased = (data?.total?.deceased == undefined) ? 0 : data?.total?.deceased;  
  77.     this.deltaDeceased = data?.delta?.deceased;  
  78.     this.totalMigrated = (data?.total?.migrated == undefined) ? 0 : data?.total?.migrated;  
  79.     let covidData: CovidData = new CovidData();  
  80.     covidData.confirmed = data?.total?.confirmed;  
  81.     covidData.delta = data?.delta?.confirmed;  
  82.     covidData.state = stateName;  
  83.     this.sharedService.addLogs.next(covidData);  
  84.     let el: HTMLElement = this.btnShowModal.nativeElement;  
  85.     el.click();  
  86.   }  
  87. }  
As I mentioned earlier, we have emitted the log data from report method inside this class. This report method is triggered every time we click a state to get Covid status.
 
Whenever we click on state in the Indian Map, we will add a log entry to the array variable in the shared service.
 
 
 
Replace template file code with below code.
 
home.component.html
  1. <div class="row margin-class">  
  2.     <div class="col-6">  
  3.         <div>  
  4.             <img src="../assets/india-map-img.png" alt="Covid-19 Tracker by Sarathlal" usemap="#Map" />  
  5.             <map id="Map" name="Map" style="cursor: pointer;">  
  6.                 <area id="jammuKashmir" shape="poly" data-toggle="tooltip"  
  7.                     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"  
  8.                     (click)="report('JK','Jammu & Kashmir');" title="Jammu & Kashmir" alt="Jammu & Kashmir">  
  9.                 <area id="ladakh" shape="poly"  
  10.                     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"  
  11.                     title="Ladakh" (click)="report('LA','Ladakh')" alt="Ladakh">  
  12.                 <area id="himachalPradesh" shape="poly"  
  13.                     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"  
  14.                     title="Himachal Pradesh" (click)="report('HP','Himachal Pradesh')" alt="Himachal Pradesh">  
  15.                 <area id="punjab" title="Punjab" shape="poly" alt="Punjab" (click)="report('PB','Punjab')"  
  16.                     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">  
  17.                 <area id="uttarakhand" title="Uttarakhand" shape="poly" alt="Uttarakhand"  
  18.                     (click)="report('UT','Uttarakhand')"  
  19.                     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">  
  20.                 <area id="haryana" title="Haryana" shape="poly" alt="Haryana" (click)="report('HR','Haryana')"  
  21.                     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">  
  22.                 <area id="National" title="National Capital Territory of Delhi" shape="poly"  
  23.                     alt="National Capital Territory of Delhi" (click)="report('DL','Delhi')"  
  24.                     coords="164,164,163,167,165,169,167,170,169,169,169,167,169,165,168,164,166,161,163,162">  
  25.                 <area id="uttarPradesh" title="Uttar Pradesh" shape="poly" alt="Uttar Pradesh"  
  26.                     (click)="report('UP','Uttar Pradesh')"  
  27.                     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">  
  28.                 <area id="rajasthan" title="Rajasthan" shape="poly" alt="Rajasthan" (click)="report('RJ','Rajasthan')"  
  29.                     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">  
  30.                 <area id="gujarat" title="Gujarat" shape="poly" alt="Gujarat" (click)="report('GJ','Gujarat')"  
  31.                     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">  
  32.                 <area id="madhyaPradesh" title="Madhya Pradesh" shape="poly" alt="Madhya Pradesh"  
  33.                     (click)="report('MP','Madhya Pradesh')"  
  34.                     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">  
  35.                 <area id="bihar" title="Bihar" shape="poly" alt="Bihar" (click)="report('BR','Bihar')"  
  36.                     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">  
  37.                 <area id="sikkim" title="Sikkim" shape="poly" alt="Sikkim" (click)="report('SK','Sikkim')"  
  38.                     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">  
  39.                 <area id="westBengal" title="West Bengal" shape="poly" alt="West Bengal"  
  40.                     (click)="report('WB','West Bengal')"  
  41.                     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">  
  42.                 <area id="assam" title="Assam" shape="poly" alt="Assam" (click)="report('AS','Assam')"  
  43.                     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">  
  44.                 <area id="meghalaya" title="Meghalaya" shape="poly" alt="Meghalaya" (click)="report('ML','Meghalaya')"  
  45.                     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">  
  46.                 <area id="tripura" title="Tripura" shape="poly" alt="Tripura" (click)="report('TR','Tripura')"  
  47.                     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">  
  48.                 <area id="mizoram" title="Mizoram" shape="poly" alt="Mizoram" (click)="report('MZ','Mizoram')"  
  49.                     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">  
  50.                 <area id="arunachalPradesh" title="Arunachal Pradesh" shape="poly" alt="Arunachal Pradesh"  
  51.                     (click)="report('AR','Arunachal Pradesh')"  
  52.                     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">  
  53.                 <area id="nagaland" title="Nagaland" shape="poly" alt="Nagaland" (click)="report('NL','Nagaland')"  
  54.                     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">  
  55.                 <area id="manipur" title="Manipur" shape="poly" alt="Manipur" (click)="report('MN','Manipur')"  
  56.                     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">  
  57.                 <area id="jharkhand" title="Jharkhand" shape="poly" alt="Jharkhand" (click)="report('JH','Jharkhand')"  
  58.                     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">  
  59.                 <area id="chhattisgarh" title="Chhattisgarh" shape="poly" alt="Chhattisgarh"  
  60.                     (click)="report('CT','Chhattisgarh')"  
  61.                     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">  
  62.                 <area id="Odisha" title="Odisha" shape="poly" alt="Odisha" (click)="report('OR','Odisha')"  
  63.                     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">  
  64.                 <area id="maharashtra" title="Maharashtra" shape="poly" alt="Maharashtra"  
  65.                     (click)="report('MH','Maharashtra')"  
  66.                     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">  
  67.                 <area id="goa" title="Goa" shape="poly" alt="Goa" (click)="report('GA','Goa')"  
  68.                     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">  
  69.                 <area id="karnataka" title="Karnataka" shape="poly" alt="Karnataka" (click)="report('KA','Karnataka')"  
  70.                     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">  
  71.                 <area id="kerala" title="Kerala" shape="poly" alt="Kerala" (click)="report('KL','Kerala')"  
  72.                     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">  
  73.                 <area id="tamilnadu" title="Tamilnadu" shape="poly" alt="Tamilnadu" (click)="report('TN','Tamilnadu')"  
  74.                     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">  
  75.                 <area title="Puducherry (Pondicherry)" shape="poly" alt="Puducherry (Pondicherry)"  
  76.                     (click)="report('PY','Puducherry')"  
  77.                     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">  
  78.                 <area shape="poly" alt="Puducherry (Pondicherry)" alt="Puducherry (Pondicherry)"  
  79.                     (click)="report('PY','Puducherry')"  
  80.                     coords="201,509,198,512,199,514,200,515,202,515,203,514,203,513,203,511,203,509">  
  81.                 <area title="Puducherry (Pondicherry)" shape="poly" alt="Puducherry (Pondicherry)"  
  82.                     (click)="report('PY','Puducherry')"  
  83.                     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">  
  84.                 <area title="Puducherry (Pondicherry)" shape="poly" alt="Puducherry (Pondicherry)"  
  85.                     (click)="report('PY','Puducherry')"  
  86.                     coords="249,395,248,398,248,401,248,404,250,403,252,402,253,400,254,398,254,396,254,394,254,392">  
  87.                 <area title="Daman and Diu" shape="poly" alt="Daman and Diu" (click)="report('DD','Daman and Diu')"  
  88.                     coords="80,305,83,308,84,311,82,313,82,315,81,313,81,310,80,307,80,304">  
  89.                 <area title="Dadra and Nagar Haveli" shape="poly" alt="Dadra and Nagar Haveli"  
  90.                     (click)="report('DN','Dadra and Nagar Haveli')"  
  91.                     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">  
  92.                 <area title="Diu" shape="poly" alt="Diu" (click)="report('DD','Daman and Diu')"  
  93.                     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">  
  94.                 <area title="Chandigarh" shape="poly" alt="Chandigarh" (click)="report('CH','Chandigarh')"  
  95.                     coords="162,119,160,125,163,126,165,127,167,127,169,126,166,124,163,120">  
  96.                 <area title="Lakshadweep" shape="poly" alt="Lakshadweep" (click)="report('LD','Lakshadweep')"  
  97.                     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">  
  98.                 <area id="andamanNicobar" title="Andaman and Nicobar Islands" shape="poly"  
  99.                     alt="Andaman and Nicobar Islands" (click)="report('AN','Andaman and Nicobar Islands')"  
  100.                     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">  
  101.                 <area id="andhraPradesh" title="Andhra Pradesh" shape="poly" alt="Andhra Pradesh"  
  102.                     (click)="report('AP','Andhra Pradesh')"  
  103.                     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">  
  104.                 <area id="telangana" title="Telangana" shape="poly" alt="Telangana" (click)="report('TG','Telangana')"  
  105.                     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>  
  106.         </div>  
  107.     </div>  
  108. </div>  
  109.   
  110.   
  111. <my-modal id="custom-modal">  
  112.     <div class="row margin-class">  
  113.         <div>  
  114.             <h6>State : </h6>  
  115.         </div>  
  116.         <div>  
  117.             <h5><span class="badge badge-secondary"> {{stateName}}</span></h5>  
  118.         </div>  
  119.     </div>  
  120.   
  121.     <div class="row margin-class">  
  122.         <div>  
  123.             <h6>As on Date : </h6>  
  124.         </div>  
  125.         <div>  
  126.             <h6><span class="badge badge-secondary">{{date |date}}</span></h6>  
  127.         </div>  
  128.     </div>  
  129.   
  130.     <h6>Population : {{population | number}}</h6>  
  131.   
  132.     <div class="row margin-class">  
  133.         <div>  
  134.             <h6>Tested : {{totalTested | number}} </h6>  
  135.         </div>  
  136.         <div *ngIf="deltaTested != undefined && deltaTested > 0">  
  137.             <h6><span class="badge badge-info"> + {{deltaTested}}</span></h6>  
  138.         </div>  
  139.     </div>  
  140.   
  141.     <div class="row margin-class">  
  142.         <div>  
  143.             <h6>Confirmed : {{totalConfirmed | number}} </h6>  
  144.         </div>  
  145.         <div *ngIf="deltaConfirmed != undefined && deltaTested > 0">  
  146.             <h6><span class="badge badge-warning"> + {{deltaConfirmed | number}}</span></h6>  
  147.         </div>  
  148.     </div>  
  149.   
  150.     <div class="row margin-class">  
  151.         <div>  
  152.             <h6>Recovered : {{totalRecovered | number}} </h6>  
  153.         </div>  
  154.         <div *ngIf="deltaRecovered != undefined && deltaRecovered > 0">  
  155.             <h6><span class="badge badge-success"> + {{deltaRecovered | number}}</span></h6>  
  156.         </div>  
  157.     </div>  
  158.   
  159.     <div class="row margin-class">  
  160.         <div>  
  161.             <h6>Deceased : {{totalDeceased | number}} </h6>  
  162.         </div>  
  163.         <div *ngIf="deltaDeceased != undefined && deltaDeceased > 0">  
  164.             <h6><span class="badge badge-danger"> + {{deltaDeceased | number}}</span></h6>  
  165.         </div>  
  166.     </div>  
  167.   
  168.     <h6>Migrated : {{totalMigrated | number}} </h6>  
  169.     <button class="btn btn-secondary" (click)="closeModal('custom-modal');">Close</button>  
  170. </my-modal>  
  171.   
  172. <button class="btn btn-lg btn-outline-primary" hidden #btnShowModal  
  173.     (click)="openModal('custom-modal')">AlertModal</button>  
Replace style code with below code.
home.component.css
  1. .margin-class{    
  2.     margin0px;    
  3. }    
  4. .img {      
  5.     width40px;    
  6.   }      
We can create another component to get shared data from home component.
 
ng generate component nav-menu
 
nav-menu.component.ts
  1. import { Component, OnDestroy, OnInit } from '@angular/core';  
  2. import { Router } from '@angular/router';  
  3. import { Subscription } from 'rxjs';  
  4. import { CovidData } from '../covid-data';  
  5. import { SharedService } from '../shared.service';  
  6.   
  7. @Component({  
  8.   selector: 'app-nav-menu',  
  9.   templateUrl: './nav-menu.component.html',  
  10.   styleUrls: ['./nav-menu.component.css']  
  11. })  
  12. export class NavMenuComponent implements OnInit, OnDestroy {  
  13.   
  14.   constructor(private sharedService: SharedService, private router: Router) { }  
  15.   
  16.   addLogSubscription: Subscription;  
  17.   logs: Array<CovidData>;  
  18.   
  19.   ngOnInit(): void {  
  20.     this.addLogSubscription = this.sharedService.addLogs.subscribe(log => {  
  21.       this.sharedService.logs.push(log);  
  22.       this.logs = this.sharedService.logs;  
  23.     })  
  24.   }  
  25.   
  26.   ngOnDestroy(): void {  
  27.     if (this.addLogSubscription) {  
  28.       this.addLogSubscription.unsubscribe();  
  29.     }  
  30.   }  
  31.   
  32.   openHome() {  
  33.     this.router.navigateByUrl('/logs');  
  34.   }  
  35. }  
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, subscription variable will automatically get that information and add to another shared variable. We will show the log count as a notification on navigation component.
 
Replace template code with below code.
 
nav-menu.component.html
  1. <header>  
  2.     <nav class='navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3'>  
  3.       <div class="container">  
  4.         <a class="navbar-brand" [routerLink]='["/"]'>Indian Covid-19 App - Please click on any state in the Map</a>  
  5.         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"  
  6.           aria-label="Toggle navigation">  
  7.           <span class="navbar-toggler-icon"></span>  
  8.         </button>  
  9.         <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">  
  10.           <ul class="navbar-nav flex-grow">  
  11.             <li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>  
  12.               <a class="nav-link text-dark" [routerLink]='["/"]'>Home</a>  
  13.             </li>  
  14.             <li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>  
  15.               <a class="nav-link text-dark" [routerLink]='["/logs"]'>Logs</a>  
  16.             </li>  
  17.             <div class="numberCircle"  *ngIf="logs && logs?.length>0" style="cursor: pointer;" (click)="openHome()">  
  18.               {{logs.length}}</div>  
  19.           </ul>  
  20.         </div>  
  21.       </div>  
  22.     </nav>  
  23.   </header>  
  24.   <footer>  
  25.     <nav class="navbar navbar-light bg-white mt-5 fixed-bottom">  
  26.       <div class="navbar-expand m-auto navbar-text">  
  27.         Developed by <b>Sarathlal Saseendran</b>  
  28.       </div>  
  29.     </nav>  
  30.   </footer>  
Replace style code with below code.
 
nav-menu.component.css
  1. a.navbar-brand {  
  2.     white-spacenormal;  
  3.     text-aligncenter;  
  4.     word-break: break-all;  
  5. }  
  6.   
  7. html {  
  8.     font-size14px;  
  9. }  
  10.   
  11. @media (min-width768px) {  
  12.     html {  
  13.         font-size16px;  
  14.     }  
  15. }  
  16.   
  17. .box-shadow {  
  18.     box-shadow: 0 .25rem .75rem rgba(000, .05);  
  19. }  
  20.   
  21. .numberCircle {  
  22.     border-radius: 50%;  
  23.     width21px;  
  24.     height21px;  
  25.     padding4px;  
  26.     background#fff;  
  27.     border1px solid darkgrey;  
  28.     colorred;  
  29.     text-aligncenter;  
  30.     margin-left-7px;  
  31.     font10px Arialsans-serif;  
  32. }  
We can create the final component for showing the logs.
 
ng generate component logs
 
Replace component code with below code.
 
logs.component.ts
  1. import { Component, OnInit } from '@angular/core';  
  2. import { CovidData } from '../covid-data';  
  3. import { SharedService } from '../shared.service';  
  4.   
  5. @Component({  
  6.   selector: 'app-logs',  
  7.   templateUrl: './logs.component.html',  
  8.   styleUrls: ['./logs.component.css']  
  9. })  
  10. export class LogsComponent implements OnInit {  
  11.   
  12.   logs: Array<CovidData>;  
  13.   
  14.   constructor(private sharedService: SharedService) { }  
  15.   
  16.   ngOnInit(): void {  
  17.     this.logs = this.sharedService.logs;  
  18.   }  
  19.   
  20. }  
Replace template code with below code.
 
logs.component.html
  1. <h3><span class="badge badge-success">Total Logs Details</span></h3>  
  2. <div *ngFor="let log of logs.reverse();">  
  3.     <h6>Selected State :  
  4.         <span class="badge badge-primary">{{log.state}}</span>  
  5.         Total Confirmed :  
  6.         <span class="badge badge-info">{{log.confirmed | number}}</span>  
  7.         <span class="badge badge-warning">+{{log.delta | number}}</span>  
  8.     </h6>  
  9. </div>  
Replace AppModule with below code.
 
app.module.ts
  1. import { NgModule } from '@angular/core';  
  2. import { BrowserModule } from '@angular/platform-browser';  
  3.   
  4. import { AppRoutingModule } from './app-routing.module';  
  5. import { AppComponent } from './app.component';  
  6. import { ModalComponent } from './modal/modal.component';  
  7. import { HomeComponent } from './home/home.component';  
  8. import { NavMenuComponent } from './nav-menu/nav-menu.component';  
  9. import { LogsComponent } from './logs/logs.component';  
  10.   
  11. import { HttpClientModule } from '@angular/common/http'    
  12.   
  13. @NgModule({  
  14.   declarations: [  
  15.     AppComponent,  
  16.     ModalComponent,  
  17.     HomeComponent,  
  18.     NavMenuComponent,  
  19.     LogsComponent  
  20.   ],  
  21.   imports: [  
  22.     BrowserModule,  
  23.     AppRoutingModule,  
  24.     HttpClientModule,    
  25.   ],  
  26.   providers: [],  
  27.   bootstrap: [AppComponent]  
  28. })  
  29. export class AppModule { }  
Replace AppRoutingModule with below code.
 
app-routing.module.ts
  1. import { NgModule } from '@angular/core';  
  2. import { RouterModule, Routes } from '@angular/router';  
  3. import { HomeComponent } from './home/home.component';  
  4. import { LogsComponent } from './logs/logs.component';  
  5.   
  6. const routes: Routes = [    
  7.   { path: '', component: HomeComponent, pathMatch: 'full' },    
  8.   {    
  9.     path: 'logs',    
  10.     component: LogsComponent    
  11.   }  
  12. ]   
  13.   
  14. @NgModule({  
  15.   imports: [RouterModule.forRoot(routes)],  
  16.   exports: [RouterModule]  
  17. })  
  18. export class AppRoutingModule { }  
Finally, we can replace the app component template code with below code.
 
app.component.html
  1. <body>      
  2.   <app-nav-menu></app-nav-menu>      
  3.   <div class="container">      
  4.     <router-outlet></router-outlet>      
  5.   </div>      
  6. </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 to the logs tab in navigation bar.
 
 
 
Whenever we click on each state, log will be added to shared variable and we can see that log in the logs page.
 
 
 

Conclusion


In this post, we have seen that how to share data between two unrelated components in 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. User can click on any of the states in this Map. Whenever 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 navigation menu bar near to logs tab.