Show country flag emoji

frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html

@@ -1,5 +1,8 @@
 <div class="container-xl full-height" style="min-height: 335px">
-  <h1 class="float-left" i18n="lightning.nodes-in-country">Lightning nodes in {{ country }}</h1>
+  <h1 class="float-left" i18n="lightning.nodes-in-country">
+    <span>Lightning nodes in {{ country?.name }}</span>
+    <span style="font-size: 50px; vertical-align:sub;"> {{ country?.flag }}</span>
+  </h1>
 
   <div style="min-height: 295px">
     <table class="table table-borderless">

frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts

@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { map, Observable } from 'rxjs';
 import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { getFlagEmoji } from 'src/app/shared/graphs.utils';
 
 @Component({
   selector: 'app-nodes-per-country',
@@ -12,7 +13,7 @@ import { SeoService } from 'src/app/services/seo.service';
 })
 export class NodesPerCountry implements OnInit {
   nodes$: Observable<any>;
-  country: string;
+  country: {name: string, flag: string};
 
   constructor(
     private apiService: ApiService,
@@ -24,8 +25,11 @@ export class NodesPerCountry implements OnInit {
     this.nodes$ = this.apiService.getNodeForCountry$(this.route.snapshot.params.country)
       .pipe(
         map(response => {
-          this.country = response.country.en
-          this.seoService.setTitle($localize`Lightning nodes in ${this.country}`);
+          this.country = {
+            name: response.country.en,
+            flag: getFlagEmoji(this.route.snapshot.params.country)
+          };
+          this.seoService.setTitle($localize`Lightning nodes in ${this.country.name}`);
           return response.nodes;
         })
       );