How do I get esri map view to change with a service in angular 8?

Question

I am trying to get the map to change when you reach a different slide in the scroll-spy. I'm having trouble getting a number from the service to use as an index for an array. I put the project up here on stackblitz. This is the app.component.ts

export class AppComponent  {
  slides=slides
  mapCenter = [-121.448637, 37.724050];
  basemapType = 'satellite';
  mapZoomLevel = 13;
  currentSection:any = 1;
  toggleSidebar() {
    if (document.getElementById("mySidebar").style.display === "none") {
    document.getElementById("mySidebar").style.display = "block";
  } else {
    document.getElementById("mySidebar").style.display = "none";
  }
  }
   constructor(private data: SlideService) { }
    ngOnInit() {
    this.currentSection = this.data.currentMessage.subscribe(msg => this.currentSection = msg.slice(-1));

    let zoomlist:any[]=[];
    for (let slide of slides){
      if(slide.MapAttributes.viewType==="detailed"){
        continue;
      }
      let zoom = slide.MapAttributes.Zoom
      zoomlist.push(zoom)
    }
    this.mapZoomLevel = zoomlist[(+(this.currentSection)-1)]

    let centerlist:any[]=[];
    for (let slide of slides){
      if(slide.MapAttributes.viewType==="detailed"){
        continue;
      }
      let center = slide.MapAttributes.MapCenter
      centerlist.push(center)
    }
    this.mapCenter = centerlist[(+(this.currentSection)-1)]
  }

This is the html

<div class="row" style="height:100%;overflow-x:hidden">      
      <app-sidebar id="mySidebar"class="col-sm-4"></app-sidebar>
      <div  id='map-container'>
        <app-esri-map [center]="mapCenter" [basemap]="basemapType" [zoom]="mapZoomLevel" (mapLoaded)="mapLoadedEvent($event)"></app-esri-map>
      </div>
    <button (click)="toggleSidebar()" id= "infoToggle">current:{{currentSection}}</button>
</div>

and this is the service

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

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

  private messageSource = new BehaviorSubject<string>("slide1");
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(msg: string) {
    this.messageSource.next(msg);
  }

}

Answer 1

Maybe you already found an answer to your question, but here are my suggestions on how to achieve that. I will assume you only want to modify the center position and the zoom level of your map whenever your slide changes.

You are already giving the center and zoomLevel parameters as input to your esri-map-component, but those values need to be updated whenever the slide changes. This can be achieved by modifying the app-component like that :

constructor(private data: SlideService) { }
    ngOnInit() {
    this.currentSection = this.data.currentMessage.subscribe(msg =>  { 
      this.currentSection = msg.slice(-1); 
      this.updateMapCenter();
      });
  this.updateMapCenter();
    
  }

  updateMapCenter() {
    let zoomlist:any[]=[];
    for (let slide of slides){
      if(slide.MapAttributes.viewType==="detailed"){
        continue;
      }
      let zoom = slide.MapAttributes.Zoom
      zoomlist.push(zoom)
    }
    this.mapZoomLevel = zoomlist[(+(this.currentSection)-1)]

    let centerlist:any[]=[];
    for (let slide of slides){
      if(slide.MapAttributes.viewType==="detailed"){
        continue;
      }
      let center = slide.MapAttributes.MapCenter
      centerlist.push(center)
    }
    this.mapCenter = centerlist[(+(this.currentSection)-1)]
  }

This way, the bindings on your esri-map-component are reevaluated each time the slide changes. All you have to do now is to listen to those changes on your esri-map-component :

ngOnChanges(changes) {
    if(this.mapView && changes && changes['center']) {
      this.mapView.goTo(this._center);
      this.mapView.zoom = this._zoom;      
    }
  }

The mapView needs to be a property of the esri-map-component itself.

Hope this helps!