Angular Google Maps waypoints don't display with dynamic waypoint array

Question

I'm trying to get waypoints in between my origin and destination address in Angular Google Maps. I have an array
waypoints: any
and a method to add waypoints dynamically:
addWaypoint($event) { this.waypoints.push({ location: { lat: $event.geoLocation.latitude, lng: $event.geoLocation.longitude}, stopover: true }); console.log(this.waypoints); }

but those waypoints won't display on the map.

 <agm-map [latitude]="lat" [longitude]="lng" [scrollwheel]="false" [zoom]="zoom">
                <agm-marker *ngIf="!destination" [latitude]="lat" [longitude]="lng"></agm-marker>
                <agm-direction *ngIf="destination" [origin]="origin" [destination]="destination" [waypoints]="waypoints">
                </agm-direction>
 </agm-map>

If I add waypoints static to the array, they will be shown:

addWaypoint($event) {
    this.waypoints = [{
        location: { lat: $event.geoLocation.latitude, lng: $event.geoLocation.longitude},
        stopover: true
    }];
    console.log(this.waypoints);
}

The console output is in both cases the same:

Any suggestions? Thanks

Answer 1

Found a solution for this by using the spread operator:

this.waypoints = [...this.waypoints, ...[{
        location: { lat: $event.geoLocation.latitude, lng: $event.geoLocation.longitude},
        stopover: true
    }]];