How to get Latitude and longitude from a click on the map? - angular5

Question

Hi everyone im trying to add the possibility that the user can get the latitude and longitude from a click and get the lat and longitude in the fields : this is my html part :
<div class="col-sm-4">
<div class=" panel panel-primary" style="background-color: darkgray;" >
<div class="panel-heading">Position :</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Adresse :</label>
<input type="text" class="form-control" [(ngModel)]="pan.adresse"/>
</div>
<div class="form-group">
<label class="control-label">Latitude</label>
<input type="text" class="form-control" [(ngModel)]="pan.latitude"/>
</div>
<div class="form-group">
<label class="control-label">Longitude :</label>
<input type="text" class="form-control" [(ngModel)]="pan.longitude"/>
</div>
<div class="form-group">
<label class="control-label">Etat :</label>
<input type="text" class="form-control" [(ngModel)]="pan.etat"/>
</div>
</div></div>
</div>
<div class="col-sm-8">
<div class=" panel panel-primary" >
<div class="panel-heading">Map :</div>
<div class="panel-body">
<agm-map [latitude]="36.718241" [longitude]="3.091969" [zoom]="6">
</agm-map>
</div></div>
</div>
so i have the map and the input related to latitude and longitude, instead of writing the informations i want to replace that by a click on the map and the fields will be full automatically
thanks guys.

Answer 1

You can use mapClick event to retrieve lat and lng of place where the user has clicked, and assign that information to variables which are being accessed in template
<agm-map (mapClick)="mapClick($event)" [latitude]="36.718241" [longitude]="3.091969" [zoom]="6">
</agm-map>
In .ts file add
mapClick($event) {
this.pan.latitude = $event.lat();
this.pan.longtitude = $event.lng();
}
mapClick Latlng