ec.components documentation
  1. Components
  2. LocationPickerComponent

File

packages/location/src/lib/location-picker.component.ts

Description

Component with map and autocomplete input to pick a location. Implements ControlValueAccessor

Extends

DefaultInputComponent

Implements

ControlValueAccessor

Metadata

providers { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => LocationPickerComponent), multi: true, }
selector ec-location-picker
styleUrls ./location-picker.component.scss
templateUrl ./location-picker.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(geocodeService: GeocodeService, formService: FormService, keycommands: KeycommandsService)
Defined in packages/location/src/lib/location-picker.component.ts:35
Parameters :
Name Type Optional
geocodeService GeocodeService No
formService FormService No
keycommands KeycommandsService No

Inputs

disabled
Type : boolean
Defined in packages/location/src/lib/location-picker.component.ts:35

readonly?

formControl
Type : FormControl
Defined in packages/location/src/lib/location-picker.component.ts:23

The form control that holds the location

placeholder
Defined in packages/location/src/lib/location-picker.component.ts:27

Placeholder for search input

showRawValue
Default value : true
Defined in packages/location/src/lib/location-picker.component.ts:25

If true, the raw location value will be visible

Methods

registerOnChange
registerOnChange(fn)
Defined in packages/location/src/lib/location-picker.component.ts:81
Parameters :
Name Optional
fn No
Returns : void
registerOnTouched
registerOnTouched()
Defined in packages/location/src/lib/location-picker.component.ts:85
Returns : void
setDisabledState
setDisabledState(isDisabled)
Defined in packages/location/src/lib/location-picker.component.ts:87
Parameters :
Name Optional
isDisabled No
Returns : void
setValue
setValue(value, fromSearch?: boolean)
Defined in packages/location/src/lib/location-picker.component.ts:46

Sets value of map and propagates change

Parameters :
Name Type Optional
value No
fromSearch boolean Yes
Returns : void
updateAddress
updateAddress()
Defined in packages/location/src/lib/location-picker.component.ts:64

updates the address string by reverse geo lookup

Returns : void
writeValue
writeValue(value: any)
Defined in packages/location/src/lib/location-picker.component.ts:58

Writes value to editor on outside model change.

Parameters :
Name Type Optional
value any No
Returns : void
focus
focus(focus)
Inherited from DefaultInputComponent
Defined in DefaultInputComponent:34
Parameters :
Name Optional Default value
focus No true
Returns : void
ngAfterViewInit
ngAfterViewInit()
Inherited from DefaultInputComponent
Defined in DefaultInputComponent:28
Returns : void

Properties

Public formService
Type : FormService
Defined in packages/location/src/lib/location-picker.component.ts:39
Public geocodeService
Type : GeocodeService
Defined in packages/location/src/lib/location-picker.component.ts:38
input
Type : InputComponent
Defined in packages/location/src/lib/location-picker.component.ts:33

Form input component

Public keycommands
Type : KeycommandsService
Defined in packages/location/src/lib/location-picker.component.ts:40
map
Type : LocationMapComponent
Decorators :
@ViewChild(LocationMapComponent, {static: true})
Defined in packages/location/src/lib/location-picker.component.ts:29

The nested LocationMapComponent

propagateChange
Default value : () => {...}
Defined in packages/location/src/lib/location-picker.component.ts:79
search
Type : LocationSearchComponent
Decorators :
@ViewChild(LocationSearchComponent, {static: true})
Defined in packages/location/src/lib/location-picker.component.ts:31

The nested LocationSearchComponent

Public control
Type : FormControl
Inherited from DefaultInputComponent
Defined in DefaultInputComponent:21

The form control that is used

Public field
Type : Field
Inherited from DefaultInputComponent
Defined in DefaultInputComponent:15

The field for which the input is meant.

focusEvent
Type : EventEmitter<boolean>
Default value : new EventEmitter()
Inherited from DefaultInputComponent
Defined in DefaultInputComponent:23

Emitter to focus the input field

Public formService
Type : FormService
Inherited from DefaultInputComponent
Defined in DefaultInputComponent:26
Public group
Type : FormGroup
Inherited from DefaultInputComponent
Defined in DefaultInputComponent:19

The form group that is used

Public item
Type : Item<any>
Inherited from DefaultInputComponent
Defined in DefaultInputComponent:17

The item that is targeted by the input

Public keycommands
Type : KeycommandsService
Inherited from DefaultInputComponent
Defined in DefaultInputComponent:26 
import { Component, forwardRef, Input, ViewChild } from '@angular/core';
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { DefaultInputComponent, FormService, InputComponent, KeycommandsService } from '@ec.components/ui';
import { GeocodeService } from './geocode.service';
import { LocationMapComponent } from './location-map.component';
import { LocationSearchComponent } from './location-search.component';

/** Component with map and autocomplete input to pick a location. Implements ControlValueAccessor */
@Component({
  selector: 'ec-location-picker',
  templateUrl: './location-picker.component.html',
  styleUrls: ['./location-picker.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => LocationPickerComponent),
      multi: true,
    },
  ],
})
export class LocationPickerComponent extends DefaultInputComponent implements ControlValueAccessor {
  /** The form control that holds the location */
  @Input() formControl: FormControl;
  /** If true, the raw location value will be visible*/
  @Input() showRawValue = true;
  /** Placeholder for search input */
  @Input() placeholder;
  /** The nested LocationMapComponent */
  @ViewChild(LocationMapComponent, { static: true }) map: LocationMapComponent;
  /** The nested LocationSearchComponent */
  @ViewChild(LocationSearchComponent, { static: true }) search: LocationSearchComponent;
  /** Form input component */
  input: InputComponent;
  /** readonly? */
  @Input() disabled: boolean;

  constructor(
    public geocodeService: GeocodeService,
    public formService: FormService,
    public keycommands: KeycommandsService
  ) {
    super(formService, keycommands);
  }

  /** Sets value of map and propagates change */
  setValue(value, fromSearch?: boolean) {
    if (!value) {
      this.search.clear();
    }
    this.map.setValue(value);
    if (!fromSearch) {
      this.updateAddress();
    }
    this.propagateChange(value);
  }

  /** Writes value to editor on outside model change. */
  writeValue(value: any) {
    this.map.setValue(value);
    this.updateAddress();
  }

  /** updates the address string by reverse geo lookup  */
  updateAddress() {
    const value = this.map.value;
    if (!value) {
      this.search.searchInput.nativeElement.value = '';
      return;
    }
    this.geocodeService.getNearestAddress(value).then((results) => {
      if (results.length) {
        this.search.searchInput.nativeElement.value = results[0].formatted_address;
      } else {
        this.search.searchInput.nativeElement.value = '';
      }
    });
  }

  propagateChange = (_: any) => {};

  registerOnChange(fn) {
    this.propagateChange = fn;
  }

  registerOnTouched() {}

  setDisabledState(isDisabled) {
    this.disabled = isDisabled;
  }
}

<ec-location-search [placeholder]="field?.getPlaceholder()||placeholder" (changed)="setValue($event,true)" [disabled]="disabled"></ec-location-search>
<ec-location-map (changed)="setValue($event)" [disabled]="disabled"></ec-location-map>
<a class="btn btn_square" (click)="setValue(null)" *ngIf="map.value&&!disabled">
    <ec-icon name="trash"></ec-icon>
</a>
<small *ngIf="showRawValue&&map?.value">{{map.value | json}}</small>

./location-picker.component.scss

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""