app.component.ts

import {
  Component,
  OnInit,
  ViewChild,
  ElementRef,
  OnDestroy
} from '@angular/core';

import WebMap from '@arcgis/core/WebMap';
import MapView from '@arcgis/core/views/MapView';
import Bookmarks from '@arcgis/core/widgets/Bookmarks';
import Expand from '@arcgis/core/widgets/Expand';
import HelloWorld from './widget/HelloWorld';
import { 
  registerMessageBundleLoader, 
  createJSONLoader, 
  fetchMessageBundle, 
  setLocale, 
  getLocale,
  onLocaleChange 
} from "@arcgis/core/intl";
import { autoUpdatedStrings } from './utils/autoUpdateStringUtils';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, OnDestroy {
  public view: any = null;
  private bundle = null;
  private bkExpand = null;
  private bundleName = "ts-tutorial-app/assets/appNLS/t9n/common";

  // The <div> where we will place the map
  @ViewChild('mapViewNode', { static: true }) private mapViewEl: ElementRef;

  async _handleT9N() {
    registerMessageBundleLoader(
        createJSONLoader({
            pattern: "ts-tutorial-app/",
            base: "ts-tutorial-app",
            location: new URL("./", window.location.href)
        })
    );
    this.bundle = await fetchMessageBundle(this.bundleName);
    console.log("Found message bundle! ", this.bundle);
  }

  initToggle() {
    const b = document.createElement("button");
    b.classList.add("app-locale-button")
    b.innerHTML = "Toggle Locale (French - English)";
    b.style.backgroundColor = "white";
    b.style.fontSize = "16px";
    this.view.ui.add(b, { position: "bottom-left", index: 0 })
    b.addEventListener("click", () => {
        getLocale() === "fr" ? setLocale("en") : setLocale("fr");
    });
  }

  initializeMap(): Promise<any> {
    this._handleT9N();
    const container = this.mapViewEl.nativeElement;

    const webmap = new WebMap({
      portalItem: {
        id: 'aa1d3f80270146208328cf66d022e09c',
      },
    });

    this.view = new MapView({
      container,
      map: webmap
    });

    return this.view.when();
  }

  ngOnInit(): any {
    // Initialize MapView and return an instance of MapView
    this.initializeMap().then(() => {

      const greetingsWidget = new HelloWorld({
          firstName: "Jane",
          lastName: "Doe",
          container: document.createElement("div")
      });

      this.view.ui.add(greetingsWidget, "bottom-right");      

      const bookmarks = new Bookmarks({
        view: this.view,
        // allows bookmarks to be added, edited, or deleted
        editingEnabled: true,
      });

      this.bkExpand = new Expand({
        view: this.view,
        content: bookmarks,
        expanded: true,
        expandTooltip: this.bundle.tools.expandLegendTip
      });

      // Add the widget to the top-right corner of the view
      this.view.ui.add(this.bkExpand, 'top-left');     

      // onLocaleChange(async () => {
      //   this.bundle = await fetchMessageBundle(this.bundleName);    
      //   console.log(this.bundle.tools.expandLegendTip);            
      // })

      autoUpdatedStrings.add({ obj: this.bkExpand, property: "expandTooltip", bundleName: this.bundleName, key: "tools.expandLegendTip" });
      
      this.initToggle();
    });
  }

  ngOnDestroy(): void {
    if (this.view) {
      // destroy the map view
      this.view.destroy();
    }
  }
}