How do I assign value.lng to [latitude] and [longitude]?

Question

when choosing a city from the list, I want to transfer the longitude and latitude to the map

<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Town/Settlement</mat-label>
    <input type="text"
           placeholder="Pick one"
           aria-label="Town/Settlement"
           matInput
           [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let value of mainService.city; index as i"  [value]="value.city_ascii" (click)="toggle(value)">
          {{value.city_ascii}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

  <agm-map [latitude] [longitude]>
    <agm-marker [latitude] [longitude]></agm-marker>
  </agm-map>
</form>

score 0 · Accepted Answer · answered Apr 13 '21 at 19:10

mat-autocomplete has several outputs in its API - https://material.angular.io/components/autocomplete/api. so you need to remove a click event from mat-option and do smth like

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="toggle(value)">

if i understood correctly what logic stays behind in the component class

side note: starting from angular 9 there's an original angular's component (https://www.npmjs.com/package/@angular/google-maps). it's much more lightweight than agm. here you can find some examples of using it - https://timdeschryver.dev/blog/google-maps-as-an-angular-component

How do I assign value.lng to [latitude] and [longitude]?

1 Answers1