world map

Author: adamgasiorek

src/app/app.component.ts

@@ -2,8 +2,10 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  template: ``
+  template: `
+<!--    <app-world-map [list]="exampleList"></app-world-map>-->
+<!--  <app-legend-map [list]="exampleList"></app-legend-map>-->`
 })
 export class AppComponent {
-  title = '';
+  exampleList = "['PL','RU','DE','CN']"
 }

src/app/app.module.ts

@@ -2,14 +2,15 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
-import {ToggleComponent} from "./toggle.component";
+import {MapsModule} from "./map/maps.module";
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    MapsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/element.module.ts

@@ -1,12 +1,14 @@
 import {ApplicationRef, DoBootstrap, Injector, NgModule} from '@angular/core';
 import {BrowserModule} from "@angular/platform-browser";
-import {ToggleComponent} from "./toggle.component";
 import {createCustomElement} from "@angular/elements";
+import {WorldMapComponent} from "./map/world-map/world-map.component";
+import {MapsModule} from "./map/maps.module";
+import {LegendMapComponent} from "./map/legend-map/legend-map.component";
 
 @NgModule({
   imports: [
     BrowserModule,
-    ToggleComponent
+    MapsModule
   ],
   providers: [],
 })
@@ -17,16 +19,27 @@ export class ElementModule implements DoBootstrap {
   ) {}
 
   ngDoBootstrap(appRef: ApplicationRef) {
-    if (!customElements.get('login-provider')) {
+    if (!customElements.get('world-map')) {
       // Register only if 'login-provider' entry is not found in the registry
 
       // Step 3: loginComponent stores the constructor class
-      const loginComponent = createCustomElement(ToggleComponent, {
+      const worldComponent = createCustomElement(WorldMapComponent, {
         injector: this.injector,    // This injector is used to load the component's factory
       });
 
       // Step 4: Registering custom tag 'login-provider' with the obtained custom class
-      customElements.define('login-provider', loginComponent);
+      customElements.define('world-map', worldComponent);
+    }
+    if (!customElements.get('world-legend-map')) {
+      // Register only if 'login-provider' entry is not found in the registry
+
+      // Step 3: loginComponent stores the constructor class
+      const worldLegendComponent = createCustomElement(LegendMapComponent, {
+        injector: this.injector,    // This injector is used to load the component's factory
+      });
+
+      // Step 4: Registering custom tag 'login-provider' with the obtained custom class
+      customElements.define('world-legend-map', worldLegendComponent);
     }
   }
 }