Does anyone know how to effectively transfer data from one page to another programmatically? I'm facing an issue where updating an input field doesn't work unless I manually edit it afterwards. Is there a better way to achieve this?
Another problem I'm encountering is that it takes two clicks for a button to update the input field. I suspect this delay is related to waiting for a response from the Arcgis API, but I'm not sure how to address this issue.
HTML
<form id="container_categorySelect" [formGroup]="details" (ngSubmit)="onSubmit()">
<img src="Location_Icon.svg" id="locationIcon" (click)="getLocation()">
<input class="form-control form-control-lg" id="addressSelect" type="text" placeholder="Address" formControlName="location" [(value)]="currentPosition">
<button mdbBtn type="submit" id="submitBtn" mdbWavesEffect> Locate </button>
</form>
Typescript
details:FormGroup = new FormGroup({
category: new FormControl(''),
location: new FormControl('')
}
);
currentPosition: string;
curLocation: any;
constructor(private router: Router,
private addressService:AddressServicesService,
) {}
// Retrieve location based on current location
getLocation(){
// Checks if GPS is supported
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(response => {
// Retrieves address based on coordinates
this.curLocation = this.addressService.retrieveLocation(response);
this.currentPosition = this.curLocation.address.ShortLabel
});
} else {
alert("Geolocation is not supported by this device")
}
}
addressService Service
// Retrieve Location Variables
currentLocation: any;
reverseGeo: string = "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode?f=pjson&featureTypes=&location=";
// Retrieves location based on coordinates
retrieveLocation(position:any){
this.http.get(this.reverseGeo + position.coords.longitude+"%2C"+position.coords.latitude).subscribe(response =>{
// Converts response(Object) to type "any"
this.currentLocation = response;
});
return this.currentLocation;
}