How to dynamically add waypoints

Question

I wonder is it possible to dynamically add waypoints, then update the direction without refreshing the page?

HTML

<agm-map [latitude]="lat" [longitude]="lng">
    <agm-direction #vc [renderOptions]="renderOptions"  (onChange)="onChange($event)" [origin]="origin" [destination]="destination" [waypoints]="waypoints" #route (onChange)="check($event)"></agm-direction>
</agm-map>

TS

newPoint(event) {
const lattitude = event.geometry.location.lat();
const longitude = event.geometry.location.lng();
const point = {
  name: event.formatted_address,
  lattitude,
  longitude
};
this.checkpoints.push(point)
this.waypoints.push({ location: { lat: lattitude, lng: longitude } });

}