Location Radius

LocationRadius is a reusable component using Angular v8.2.0

Installation

$3

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

Usage

$3

`html
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)">
`

$3

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() | This event emits all selected Location Items
@Output()
searchedLocation:EventEmitter() | This event emits searched text
@Output()
unavailableOptionEvent:EventEmitter() | Trigger event in case if selected item doesn't match to availableCountryCodes requirement

$3

1) Import _'LocationRadiusModule'_ in your app module

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

@NgModule({
imports:[
..
LocationRadiusModule
..
]
})
`
1) Add _bootstrap_ and _main_ styles to your app
`ts
npm i bootstrap
`
`ts
"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

`html
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)">
``