Wywołanie funkcji dopiero po spełnieniu argumentu Angular Google Maps

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ClientService } from '../Services/ClientService';
import { Client } from '../Models/Client';
import { last } from 'rxjs/operators';
import { element } from 'protractor';
import { stringify } from '@angular/compiler/src/util';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  title = 'WGCM';
  lat = 52.237049;
  lng = 18.517532;
  pointList: { lat: number; lng: number }[] = [];
  drawingManager;
  all_overlays = [];
  selectedShape: any;
  selectedArea = 0;


  @Input() clientList: Array<Client>;
  @Output() klienci : EventEmitter<Client[]> = new EventEmitter<Client[]>();
  clientLocations = [];
  circledClients = [];




  constructor(private client: ClientService){}

  ngOnInit(): void {
  }


  onMapReady(map) {
    this.initDrawingManager(map);
  }

  initDrawingManager = (map: any) => {
    const self = this;
    this.drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.POLYGON,
            drawingControl: true,
            drawingControlOptions: {
              position: google.maps.ControlPosition.TOP_CENTER,
              drawingModes: [
                // google.maps.drawing.OverlayType.MARKER,
                google.maps.drawing.OverlayType.POLYGON,

              ],
            },
            markerOptions: {
              icon:
                "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
            },
            circleOptions: {
              fillColor: "#ffff00",
              fillOpacity: 1,
              strokeWeight: 5,
              clickable: false,
              editable: true,
              zIndex: 1,
            },
          }
          );
    this.drawingManager.setMap(map);



    google.maps.event.addListener(
      this.drawingManager,
      'overlaycomplete',
      (event) => {
        if (event.type === google.maps.drawing.OverlayType.POLYGON) {
          const paths = event.overlay.getPaths();
          for (let p = 0; p < paths.getLength(); p++) {
            google.maps.event.addListener(
              paths.getAt(p),
              'set_at',
              () => {
                if (!event.overlay.drag) {
                  self.updatePointList(event.overlay.getPath());
                }
              }
            );
            google.maps.event.addListener(
              paths.getAt(p),
              'insert_at',
              () => {
                self.updatePointList(event.overlay.getPath());
              }
            );

            google.maps.event.addListener(
              paths.getAt(p),
              'remove_at',
              () => {
                self.updatePointList(event.overlay.getPath());
              }
            );
          }
          self.updatePointList(event.overlay.getPath());
          this.selectedShape = event.overlay;
          this.selectedShape.type = event.type;
        }
        if (event.type !== google.maps.drawing.OverlayType.MARKER) {
          // Switch back to non-drawing mode after drawing a shape.
          self.drawingManager.setDrawingMode(null);
          // To hide:
          self.drawingManager.setOptions({
            drawingControl: false,
          });
        }
      }
    );
  }

  private setCurrentPosition() {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.lat = position.coords.latitude;
        this.lng = position.coords.longitude;
      });
    }
  }

  deleteSelectedShape() {
    if (this.selectedShape) {
      this.selectedShape.setMap(null);
      this.selectedArea = 0;
      this.pointList = [];
      // To show:
      this.drawingManager.setOptions({
        drawingControl: true,
        drawingMode: google.maps.drawing.OverlayType.POLYGON
      });
    }
  }

  updatePointList(path) {
    this.pointList = [];
    const len = path.getLength();
    for (let i = 0; i < len; i++) {
      this.pointList.push(
        path.getAt(i).toJSON()
      );
    }
    this.selectedArea = google.maps.geometry.spherical.computeArea(
      path
    );
  }


  checkMarkersInBounds(event) {

    console.log("In method - testing");
    this.circledClients = [];


     this.clientLocations = this.getClientLocations();


    for(let company of this.clientLocations){

      let companyPosition = {Lat: company.latitude, Lng: company.longitude,latlng: new google.maps.LatLng(company.latitude,company.longitude)};


      if (this.selectedArea!=0) {
            let drawedPolygon = new google.maps.Polygon({ paths: this.pointList });


          const result = google.maps.geometry.poly.containsLocation
          (
            companyPosition.latlng,
            drawedPolygon
          )

          if (result) {
            this.circledClients.push(company);
          }

      }

      // console.log(this.circledClients);

    }
  }

  getClientLocations() : any[] {

    let cl = this.clientList.map(item => {
      const container = {};

      container['latitude'] = item.latitude;
      container['longitude'] = item.longitude;
      container['latlng'] = item.latitude+","+item.longitude;
      container['Nazwa'] = item.name;
      container['Miasto'] = item.city;

      return container;
  })

  return cl;
}


    }

<div class="map" *ngIf="clientList">
  <div>
    <button type="button" class="btn btn-dark" (click)="deleteSelectedShape()">Wyczyść rysowanie</button>
  </div>
  <div>
    <span> Selected Area: {{ selectedArea.toPrecision(5) }}m<sup>2</sup> </span>
    <span>Selected Clients : {{circledClients.length}}</span>
  </div>
  <agm-map class="map" [zoom] = "7" [latitude] ="lat" [longitude] ="lng"
    (mapReady)="onMapReady($event)"
    (boundsChange)="checkMarkersInBounds($event)"
    >
    <ng-container *ngFor= "let place of clientList">
      <agm-marker [latitude]= "place.latitude" [longitude]= "place.longitude"
      [title] ="place.name" [iconUrl] = getUrlMarker(place.segment)>
    <agm-info-window>
      <b>Kod klienta:</b> {{place.clientId}}
      <p><b>Nazwa:</b> {{place.name}}</p>
      <p><b>Miasto:</b> {{place.city}}</p>
      <p><b>Powiat:</b> {{place.province}}</p>
      <p><b>Segment:</b> {{place.segment}}</p>
    </agm-info-window>
    </agm-marker>
    </ng-container>
  </agm-map>


    <div *ngFor="let point of pointList">
      <div>{{ point.lat.toPrecision(5) }}, {{ point.lng.toPrecision(5) }}</div>
    </div>

</div>