I am trying to create a web app with angular, for a delivery service. I have inputs, synced with google places, that capture the departure and destination locations. The app uses @angular/google-maps components for drawing the trajectory followed by car from one endpoint to the other. The structure of the app template is more or less like this
<div class="map-container">
<google-map *ngIf="loadedCenter" [height]="'100%'" [width]="'100%'" [center]="center" [options]="options">
<map-directions-renderer *ngIf="showDirectionsRoute" [directions]="directionsRoute" [options]="routeOptions" (directionsChanged)="setDirectionsOnDrag($event)">
</map-directions-renderer>
</google-map>
Now, I understand that the directions renderer wraps Google Maps API classes, and thus, the directionsChanged event returns undefined. However, I don't know how to access the new route from my app component after a route change takes place, specifically produced by dragging the markers. Now, I checked out the code for the map-directions-renderer class (https://github.com/angular/components/blob/master/src/google-maps/map-directions-renderer/README.md) and noticed that the internal directions are not accessible via @Output directive. I'm very new to Angular, by the way. Thanks in advance.
A demo of the app can be found on this link. The desired result would be to be able to update the destination points on marker drag. The idea is to use @angular/google-maps components.