open-index/open-npm huggingface dataset:
npm package: @ngx-perimeter/core
Description: [![license](https://img.shields.io/github/license/mohammedzamakhan/ngx-perimeter.svg)](https://github.com/mohammedzamakhan/ngx-perimeter/blob/master/LICENSE)
Latest version: 0.0.3

# @ngx-perimeter/core

[![license](https://img.shields.io/github/license/mohammedzamakhan/ngx-perimeter.svg)](https://github.com/mohammedzamakhan/ngx-perimeter/blob/master/LICENSE)

## Table of Contents
- [Problem](#problem)
- [Solution](#solution)
- [Install](#install)
- [Usage](#usage)
- [Contribute](#contribute)
- [License](#license)

## Problem

In our applications, we download javascript files or call an API etc after the user acts, like click, tab etc. Due to which we show the loading state after the user interaction.

## Solution

The `ngx-perimeter` solves this by giving you infortion about user interaction before user even interacts with it. By using this project, based on the mouse movements (Desktop Applicaiton), if the mouse is near a element by some distance (input: `padding`), you get a notification using a event (`breach`) to act before the user acts.

You can also use the PerimeterStrategy to load routes if the user is near the route. Check `@ngx-perimeter/strategy`.

## Install

Install and manage the ngx-perimeter using NPM. You may use `yarn` or `npm`.

`npm install @ngx-perimeter/core --save`

or

`yarn add @ngx-perimeter/core`

## Usage

### NgModule
Import the PerimeterModule in the NgModule and declare them in the "imports".

- Step 1:

``` ts
import { PerimeterModule } from '@ngx-perimeter/core';

@NgModule({
  imports: [
    PerimeterModule
  ]
})
```
- Step 2:
Use the `ngxPerimeter` directive
```html
<button
  ngxPerimeter
  padding="50"
  (breach)="onBreach()"
>
  Button
</button>

```

## Contribute

Please contribute by creating issues/PRs

## License

[© 2019 ngx-perimeter. All Rights Reserved.](../LICENSE)
npm package: @ngx-perimeter/strategy
Description: [![license](https://img.shields.io/github/license/mohammedzamakhan/ngx-loadable.svg)](https://github.com/mohammedzamakhan/ngx-perimeter/blob/master/LICENSE)
Latest version: 0.0.3

# @ngx-perimeter/strategy

[![license](https://img.shields.io/github/license/mohammedzamakhan/ngx-loadable.svg)](https://github.com/mohammedzamakhan/ngx-perimeter/blob/master/LICENSE)

## Table of Contents
- [Install](#install)
- [Usage](#usage)
- [Contribute](#contribute)
- [License](#license)

## Install

Install and manage the ngx-perimeter using NPM. You may use `yarn` or `npm`.

`npm install @ngx-perimeter/strategy --save`

or

`yarn add @ngx-perimeter/strategy`

## Usage

### NgModule
Import the PerimeterModule in the NgModule and declare them in the "imports".

- Step 1:

``` ts
import { PerimeterStrategyModule } from '@ngx-perimeter/strategy';

@NgModule({
  imports: [
    PerimeterStrategyModule
  ]
})
```

- Step 2:
```ts
import { PerimeterStrategy } from '@ngx-perimeter/strategy';

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PerimeterStrategy
  })],
  providers: [PerimeterStrategy],
  exports: [RouterModule]
})
export class AppRoutingModule { }
```


- Step 3:
Use the `ngxPerimeterRoute` directive aling with routerLink and ngxPerimeter
```html
<button
  [routerLink]="['about-us']"
  ngxPerimeterRoute
  ngxPerimeter
  padding="50"
  (breach)="onBreach()"
>
  Button
</button>

```

## Contribute

Please contribute by creating issues/PRs

## License

[© 2019 ngx-perimeter. All Rights Reserved.](../LICENSE)