-1

I'm trying to execute functions below a subscribe, but just when this finish. I have two components, a principal o father component which receives the information from the backend, and the grandchild, which gets the data filtered from the grandfather.

Service

In the service, there are functions to share data between components, and a function to process data and split how I need it.

sendDataToMap(dataToMap: []) {
    this.send_data.next(dataToMap);
  }

  reciveDataToMap(): Observable<any>{
    return this.send_data.asObservable();
  }

getDataToRenderOnMap(dataToMap){

    dataToMap.forEach((data) => {

      this.routesList.push(data?.mbl_vessels?.path);

      const currentPos: number[] = Object.values(data?.mbl_vessels?.currentPosition);
      this.pointsToFit.push(currentPos);

      const marker: IMarker = {
        transportType: data?.quote?.transportationMode,
        currentPosition: currentPos
      }

      this.markersToRender.push(marker);

    });

    return {
      routesList: this.routesList,
      pointsToFit: this.pointsToFit,
      markersToRender: this.markersToRender
    }

  }

father component

In the father component, there is the process to filter data which have this property, and send the array.

this.elementsToMap = elementsReq.data.filter(item => item.hasOwnProperty('mbl_vessels'));
this.miniMapService.sendDataToMap(this.elementsToMap);

grandchild component

Receive the data, process, and use a function to get the data that I need to use for draw the routes and other processes on the map.

ngAfterViewInit() {

    this.loadMap(MapStyles.COLOR_STYLE);
    this.loadMapControls();

    this.prepareDataToMap();

    //The idea is to execute the functions below once is finished the subscribe process end
    //And return the data out of subscribe


    this.setLineStyle(LinePathColor.TO_COLOR, geoData);
    this.setCustomMarkers();
    this.setMarkerForBounding(shipmentsDataPosition);

    this.cdref.detectChanges();
  }

prepareDataToMap(){
    this.miniMapService.reciveDataToMap().subscribe((data) => {
      this.dataToMap = data;
      this.dataReturned = this.miniMapService.getDataToRenderOnMap(this.dataToMap);
    });
  }

setLineStyle(colorPath: string, route?) {

    this.mapa.on('load', () => {
      this.mapa.addSource('route', {
        'type': 'geojson',
        'data': {
          'type': 'Feature',
          'properties': {},
          'geometry': {
            'type': 'LineString',
            'coordinates': route
          }
        }
      });

      this.mapa.addLayer({
        'id': 'route',
        'type': 'line',
        'source': 'route',
        'layout': {
          'line-join': 'round',
          'line-cap': 'round'
        },
        'paint': {
          'line-color': colorPath,
          'line-width': 2,
          "line-dasharray": [0.2, 2]
        }
      });
    });

  }

cl

The first console show undefined, the second show the data, but this is because is inside the subscribe.

data

The data I get is processed once it is received in the grandchild component

Pedro Miguel Pimienta Morales
  • 443
  • 3
  • 10
  • 31

1 Answers1

0

If you want to execute something when the observable ends maybe you can try with the complete method of observables

https://rxjs.dev/guide/observable

When the complete value is emited you run those methods Observables: Complete vs finally vs done

jesus marmol
  • 26
  • 3