Location Radius

LocationRadius is a reusable component using Angular v8.2.0

Installation

NPM

npm i @eff-custom-plugins/location-radius

Usage

HTML

<app-location    [locationList]="[{  key: "AM",
                                     name: "Армения",
                                     type: "country",
                                     country_code: "AM",
                                     country_name: "Армения",
                                     supports_region: true,
                                     supports_city: true }]"
                 [radiusRangeConfig]="{ min:0, max:25,
                                        radiusSizeType: 'mi',
                                        defaultValue: 'Current city only',
                                        selectRadiusTitle: 'Cities within radius'}"
                 (selectedLocation)="onSelectedLocation($event)"
                 (searchedLocation)="onSearchedLocation($event)"></app-location>

Attributes

Attributes | Description ---------- | ----------- @Input() locationList: ILocationList[] | This Location data list @Input() radiusRangeConfig: ILocationRadiusValueConfig | This Location radius validation config not required defaults {default: {radius: [{min: 10, max: 50, unit: 'mi'}, {min: 16, max: 80, unit: 'km'}]}, custom: {MX: {radius: [{min: 10, max: 50, unit: 'mi'}, {min: 16, max: 80, unit: 'km'}]}}} @Input() availableCountryCodes: string[] | Items belonging to availableCountryCodes only can be selected @Input() expendedListing: boolean | If 'true' locations will combine by groups. If 'false' it will appear all together ('true' by default) @Input() disabled: boolean | disable all actions ('true' by default) @Output() selectedLocationEvent:EventEmitter<ILocationList[]>() | This event emits all selected Location Items @Output() searchedLocation:EventEmitter<string.>() | This event emits searched text @Output() unavailableOptionEvent:EventEmitter<ILocationList.>() | Trigger event in case if selected item doesn't match to availableCountryCodes requirement

Example and Sample Code

1. Import 'LocationRadiusModule' in your app module

import { LocationRadiusModule } from "@eff-custom-plugins/location-radius";

@NgModule({
  imports:[
    ..
    LocationRadiusModule
    ..
  ]
})

1. Add bootstrap and main styles to your app

npm i bootstrap

"styles": [
  ..
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/@eff-custom-plugins/location-radius/lib/assets/main.scss",
  ..
],

3. Add 'location-radius' in your component html

<location-radius [locationList]="[{  key: "AM",
                                     name: "Армения",
                                     type: "country",
                                     country_code: "AM",
                                     country_name: "Армения",
                                     supports_region: true,
                                     supports_city: true }]"
                 [radiusRangeConfig]="{ min:0, max:25,
                                        radiusSizeType: 'mi',
                                        defaultValue: 'Current city only',
                                        selectRadiusTitle: 'Cities within radius'}"
                 (selectedLocation)="onSelectedLocation($event)"
                 (searchedLocation)="onSearchedLocation($event)"></location-radius>