Poi | You can use tinder UI like tableview method | RecyclerView library

 ngAfterViewInit(): void {
    this.showResult= new MapLocation(); 
    this.marker1.on('dragend', this.searchOriginWithLatLngMarker1);
  }

  ngAfterContentInit(): void {

  }




searchOriginWithLatLngMarker1(event)
  {
   
    this.showResultTemp= new MapLocation();
    const queryUrl = `https://api.neshan.org/v2/reverse?&lat=${event.target._latlng.lat}&lng=${event.target._latlng.lng}`;
    let headers = new HttpHeaders().set('Content-Type', 'text')
    .append('Api-Key', Helpers._serviceMapKey);
        const result = ajax({
      method: 'GET',
      url: queryUrl,
      headers: {
        'Api-Key': Helpers._serviceMapKey
      }
      });
      result.subscribe((response:any) => {
      this.changeMarkerDate = response.response;
      this.showResultTemp.title=this.changeMarkerDate.route_name;
      this.showResultTemp.address=this.changeMarkerDate.formatted_address;
      this.showResultTemp.lat=event.target._latlng.lat;
      this.showResultTemp.lng=event.target._latlng.lng;
     
      this.showResult=this.showResultTemp;

     
      this.showResult.address=this.showResult.address.replace("استان خراسان رضوی،","");
      this.showResult.address=this.showResult.address.replace("مشهد،","");
      this.showResult.address=this.showResult.address.trimStart();
      this.showResult.address=this.showResult.address.trimEnd();
      (document.getElementById("SrcRegion") as HTMLTextAreaElement).value=this.showResult.region;
      (document.getElementById("SrcTitle") as HTMLTextAreaElement).value=this.showResult.title;
      // document.getElementById('SrcAddress').setAttribute("value",this.showResult.address);
      (document.getElementById("SrcAddress") as HTMLTextAreaElement).value=this.showResult.address;
      (document.getElementById("SrcLat") as HTMLTextAreaElement).value=this.showResult.lat;
      (document.getElementById("SrcLng") as HTMLTextAreaElement).value=this.showResult.lng;

      event.target.bindPopup(this.showResult.title).openPopup();

     const dstlat= (document.getElementById("DstLat") as HTMLTextAreaElement).value 
     const dstlng=(document.getElementById("DstLng") as HTMLTextAreaElement).value

      // this.travelModel.SrcLat=this.showResult.lat;
      // this.travelModel.SrcLng=this.showResult.lng;

      if(dstlat != undefined && dstlat != null && dstlat!= ""
      && dstlng != undefined && dstlng != null && dstlng!= "")
      {
        this.parameterDirection={
          type: "car",
          origin:  [this.showResult.lat,this.showResult.lng],
          destination:   [dstlat,dstlng],
          avoidTrafficZone: true,
          avoidOddEvenZone: true,
          alternative: true,
      };

      const queryUrl2 = `https://api.neshan.org/v3/direction?type=${ this.parameterDirection.type}&origin=${ this.parameterDirection.origin}&destination=${ this.parameterDirection.destination}&avoidTrafficZone=${ this.parameterDirection.avoidTrafficZone}&avoidOddEvenZone=${ this.parameterDirection.avoidOddEvenZone}&alternative=${ this.parameterDirection.alternative}`;
      //const queryUrl = `https://api.neshan.org/v1/search`;
      let headers = new HttpHeaders().set('Content-Type', 'text')
      .append('Api-Key', Helpers._serviceMapKey);
    

      const result = ajax({
        method: 'GET',
        url: queryUrl2,
        headers: {
          'Api-Key': Helpers._serviceMapKey
        }
        });
         result.subscribe((response:any) => {
          this.resultDirections=response.response.routes;
          this.resultDirection=this.resultDirections[0];
          //this.travelModel.Distance=Math.round(this.resultDirection.legs[0].distance.value/1000);
          const distance=Math.round(this.resultDirection.legs[0].distance.value/1000);
          document.getElementById('lbldistance').innerHTML= this.resultDirection?.legs[0].distance.text;
          document.getElementById('lbltime').innerHTML= this.resultDirection?.legs[0].duration.text;
          // document.getElementById('Distance').setAttribute("value",distance.toString());
          (document.getElementById("Distance") as HTMLTextAreaElement).value=distance.toString();
          const dateObj = new Date(this.resultDirection.legs[0].duration.value * 1000);
          // this.travelModel.TotalTime={hours:0,minutes:0};
          const h=dateObj.getUTCHours();
          const d=dateObj.getUTCMinutes();
          // this.duration.minutes=dateObj.getUTCHours();
          // this.duration.hours=dateObj.getUTCMinutes();

    
          // this.travelModel.TotalTime.hours= h;
          // this.travelModel.TotalTime.minutes= d;

          // this.travelModel.FirstServicePrice=(this.station?.InputPrice +(this.station?.KMPrice* this.travelModel.Distance)+(this.station?.DelayPrice* ((h * 60) + d)));
          const inputPrice=(document.getElementById("InputPrice") as HTMLTextAreaElement).value;
          const kmPrice=(document.getElementById("KMPrice") as HTMLTextAreaElement).value;
          const delayPrice=(document.getElementById("DelayPrice") as HTMLTextAreaElement).value;
          //document.getElementById('FirstServicePrice').setAttribute("value",(+inputPrice +(+kmPrice * distance)+(+delayPrice * ((h * 60) + d))).toString());
          const firstPrice=(+inputPrice +(+kmPrice * distance)+(+delayPrice * ((h * 60) + d)));
          (document.getElementById("FirstServicePrice") as HTMLTextAreaElement).value=Helpers.roundNumber(firstPrice).toString();
                  let now = new Date();
                  let hours = ("0" + h).slice(-2);
                  let minutes = ("0" + d).slice(-2);
                  let str = hours + ':' + minutes;
                  this.durectiontime=str;
       

               
                  (document.getElementById("durectiontime") as HTMLTextAreaElement).value=this.durectiontime;
               
      });
      }
      });

  }