# ngx-request-idle

> This library is a set of utilities to improve the performance of Angular 2+ applications.

Latest version **1.0.3** (published 2019-12-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-request-idle
pnpm add ngx-request-idle
yarn add ngx-request-idle
bun add ngx-request-idle
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-12-26 |
| First published | 2019-11-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 147.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Héctor Reyes López |
| Maintainers | hreyeslo |

## Links

- npm: https://www.npmjs.com/package/ngx-request-idle
- Repository: https://github.com/hreyeslo/ngx-requestIdle
- Homepage: https://github.com/hreyeslo/ngx-requestIdle#readme
- Issues: https://github.com/hreyeslo/ngx-requestIdle/issues
- npm.io page: https://npm.io/package/ngx-request-idle

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 1.0.3 (latest) — 2019-12-26
- 1.0.2 — 2019-12-19
- 1.0.1 — 2019-12-01
- 1.0.0 — 2019-11-30

## README

<h1 align="center">ngx-request-idle</h1>
<p align="center">
This library is a set of utilities to improve the performance of Angular 2+ applications.
</p>

## Demo

You can see the real example in this [stackblitz](https://stackblitz.com/edit/request-idle-demo?file=src%2Fapp%2Fapp.module.ts)

## Installation instructions
Install `ngx-request-idle` from `npm`:
```bash
npm install ngx-request-idle

or

yarn add ngx-request-idle
```

Add needed package to NgModule imports:
```
import { RequestIdleModule } from 'ngx-request-idle';

@NgModule({
  ...
  imports: [RequestIdleModule.forRoot(),...]
  ...
})
```

## Content

This package contains a service and a custom preload strategy.

- RequestIdle (service)

  * callback() -> Queues a function to be called during a browser's idle periods.
  * requestAnimationFrame() -> this method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint.

- RequestIdlePreloadAllModules (Preload Strategy)

  * This strategy combines the 2 methods of the requestidle service to ensure a preload without blockages

## Usage

##### requestIdleCallback
```bash
import { RequestIdle } from 'ngx-request-idle';
...
export class AppComponent implements OnInit {
  ...
  constructor(private _requestIdle: RequestIdle) { }

  ngOnInit() {
    this._requestIdle.callback(() => { // Whatever you need });
  }
  ...
}
```

##### requestAnimationFrame
```bash
import { RequestIdle } from 'ngx-request-idle';
...
export class AppComponent implements OnInit {
  ...
  constructor(private _requestIdle: RequestIdle) { }

  ngOnInit() {
    this._requestIdle.requestAnimationFrame(() => { // Whatever you need });
  }
  ...
}
```

##### RequestIdlePreloadAllModules
```bash
import { RequestIdlePreloadAllModules } from "ngx-request-idle";
...
imports: [
  RouterModule.forRoot(routes, {
    // Custom strategy to improve performance when loading lazy-load modules
    preloadingStrategy: RequestIdlePreloadAllModules
  }),
  ...
]
...
```

---
_Source: https://npm.io/package/ngx-request-idle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._