AgmDirection visible binding not working properly

Question

In my project I am showing map with 10 routes. I have flag called 'visible' for every route which is bound with agm-direction tag. On button click event I set some of the flags to false. Sometimes it works just fine by hiding routes for which flag == false, but in some cases it doesn't work.

<agm-map [styles]="mapstyles" [streetViewControl]="false">
  <agm-direction *ngFor="let trip of planData.tripList [waypoints]="trip.waypoints" [visible]="trip.visible" [origin]="trip.origin" [destination]="trip.destination" [renderOptions]="{suppressMarkers: true, polylineOptions: { strokeColor: trip.hexColor }}">
    <agm-marker [latitude]="trip.origin.lat" [longitude]="trip.origin.lng">
      <agm-info-window isOpen="true">
          Depot
      </agm-info-window>
    </agm-marker>
    <div *ngIf="trip.showMarkers">
      <agm-marker class="marker" *ngFor="let marker of trip.markers" [latitude]="marker.latitude" [longitude]="marker.longitude">
        <agm-info-window>
           {{marker.customerName}}
        </agm-info-window>
      </agm-marker>
    </div>
   </agm-direction>
</agm-map>