open-index/open-npm huggingface dataset:
npm package: @ngx-lite/debounce-click
Description: [![npm version](https://badge.fury.io/js/%40ngx-lite%2Fdebounce-click.svg)](https://badge.fury.io/js/%40ngx-lite%2Fdebounce-click)
Author: Cory Rylan
Latest version: 14.0.0

# @ngx-lite/debounce-click

[![npm version](https://badge.fury.io/js/%40ngx-lite%2Fdebounce-click.svg)](https://badge.fury.io/js/%40ngx-lite%2Fdebounce-click)

A simple Angular Directive to easily debounce click events.

## [Documentation]()

## License

MIT © [Cory Rylan](https://coryrylan.com)
npm package: @ngx-lite/eq
Description: [![npm version](https://badge.fury.io/js/%40ngx-lite%2Feq.svg)](https://badge.fury.io/js/%40ngx-lite%2Feq)
Author: Cory Rylan
Latest version: 14.0.0

# @ngx-lite/eq

[![npm version](https://badge.fury.io/js/%40ngx-lite%2Feq.svg)](https://badge.fury.io/js/%40ngx-lite%2Feq)

NGX-EQ is an Angular Directive that makes it easier to allow
components to be responsive to their parent element size.
CSS Media Queries fall short when it comes to reusable components,
as they measure screen size and not the size context of the element.

NGX-EQ uses the Resize Observer API to efficiently add special
CSS class hooks to style your component based on the current
size of the component.

### [Documentation]()

## License

MIT © [Cory Rylan](https://coryrylan.com)
npm package: @ngx-lite/in-viewport
Description: [![npm version](https://badge.fury.io/js/%40ngx-lite%2Fin-viewport.svg)](https://badge.fury.io/js/%40ngx-lite%2Fin-viewport)
Author: Cory Rylan
Latest version: 14.0.0

# @ngx-lite/in-viewport

[![npm version](https://badge.fury.io/js/%40ngx-lite%2Fin-viewport.svg)](https://badge.fury.io/js/%40ngx-lite%2Fin-viewport)

A simple Angular Directive to easily determine if a element in in the viewport.

## [Demo]()

## License

MIT © [Cory Rylan](https://coryrylan.com)
npm package: @ngx-lite/input-datepicker
Description: [![npm version](https://badge.fury.io/js/%40ngx-lite%2Finput-datepicker.svg)](https://badge.fury.io/js/%40ngx-lite%2Finput-datepicker)
Author: Cory Rylan
Latest version: 14.0.0

# @ngx-lite/input-datepicker

[![npm version](https://badge.fury.io/js/%40ngx-lite%2Finput-datepicker.svg)](https://badge.fury.io/js/%40ngx-lite%2Finput-datepicker)

A lightweight datepicker input component supporting both Reactive and Template forms.

## [Demo]()

## License

MIT © [Cory Rylan](https://coryrylan.com)
npm package: @ngx-lite/input-range
Description: [![npm version](https://badge.fury.io/js/%40ngx-lite%2Finput-range.svg)](https://badge.fury.io/js/%40ngx-lite%2Finput-range)
Author: Cory Rylan
Latest version: 14.0.0

# @ngx-lite/input-range

[![npm version](https://badge.fury.io/js/%40ngx-lite%2Finput-range.svg)](https://badge.fury.io/js/%40ngx-lite%2Finput-range)

A lightweight range input component supporting both Reactive and Template forms.

## [Demo]()

## License

MIT © [Cory Rylan](https://coryrylan.com)
npm package: @ngx-lite/input-star-rating
Description: [![npm version](https://badge.fury.io/js/%40ngx-lite%2Finput-star-rating.svg)](https://badge.fury.io/js/%40ngx-lite%2Finput-star-rating)
Author: Cory Rylan
Latest version: 14.0.0

# @ngx-lite/input-star-rating

[![npm version](https://badge.fury.io/js/%40ngx-lite%2Finput-star-rating.svg)](https://badge.fury.io/js/%40ngx-lite%2Finput-star-rating)

A lightweight star rating component compatible with both Angular Reactive Forms and Template Forms.

## [Demo]()

## License

MIT © [Cory Rylan](https://coryrylan.com)
npm package: @ngx-lite/input-switch
Description: [![npm version](https://badge.fury.io/js/%40ngx-lite%2Finput-switch.svg)](https://badge.fury.io/js/%40ngx-lite%2Finput-switch)
Author: Cory Rylan
Latest version: 14.0.0

# @ngx-lite/input-switch

[![npm version](https://badge.fury.io/js/%40ngx-lite%2Finput-switch.svg)](https://badge.fury.io/js/%40ngx-lite%2Finput-switch)

A lightweight switch component compatible with both Angular Reactive Forms and Template Forms.

## [Demo]()

## License

MIT © [Cory Rylan](https://coryrylan.com)
npm package: @ngx-lite/input-tag
Description: [![npm version](https://badge.fury.io/js/%40ngx-lite%2Finput-tag.svg)](https://badge.fury.io/js/%40ngx-lite%2Finput-tag)
Author: Cory Rylan
Latest version: 14.0.0

# @ngx-lite/input-tag

[![npm version](https://badge.fury.io/js/%40ngx-lite%2Finput-tag.svg)](https://badge.fury.io/js/%40ngx-lite%2Finput-tag)

A lightweight tag input component compatible with both Angular Reactive Forms and Template Forms.

## [Demo]()

## License

MIT © [Cory Rylan](https://coryrylan.com)
npm package: @ngx-lite/json-ld
Description: [![npm version](https://badge.fury.io/js/%40ngx-lite%2Fjson-ld.svg)](https://badge.fury.io/js/%40ngx-lite%2Fjson-ld)
Author: Cory Rylan
Latest version: 14.0.0

# @ngx-lite/json-ld

[![npm version](https://badge.fury.io/js/%40ngx-lite%2Fjson-ld.svg)](https://badge.fury.io/js/%40ngx-lite%2Fjson-ld)

A small component to easily bind [JSON-LD](https://developers.google.com/search/docs/guides/intro-structured-data) schema to Angular templates.

## [Demo]()

## License

MIT © [Cory Rylan](https://coryrylan.com)
npm package: @ngx-lite/loaders
Description: [![npm version](https://badge.fury.io/js/%40ngx-lite%2Floaders.svg)](https://badge.fury.io/js/%40ngx-lite%2Floaders)
Author: Cory Rylan
Latest version: 14.0.0

# @ngx-lite/loaders

[![npm version](https://badge.fury.io/js/%40ngx-lite%2Floaders.svg)](https://badge.fury.io/js/%40ngx-lite%2Floaders)

Small lightweight loading indicator Angular components.

## [Demo]()

## License

MIT © [Cory Rylan](https://coryrylan.com)
npm package: @ngx-lite/modal
Description: [![npm version](https://badge.fury.io/js/%40ngx-lite%2Fmodal.svg)](https://badge.fury.io/js/%40ngx-lite%2Fmodal)
Author: Cory Rylan
Latest version: 14.0.0

# @ngx-lite/loaders

[![npm version](https://badge.fury.io/js/%40ngx-lite%2Fmodal.svg)](https://badge.fury.io/js/%40ngx-lite%2Fmodal)

Simple accesible modal component, supports ng-templates as well.

## [Demo]()

## License

MIT © [Cory Rylan](https://coryrylan.com)
npm package: @ngx-lite/nav-drawer
Description: [![npm version](https://badge.fury.io/js/%40ngx-lite%2Fnav-drawer.svg)](https://badge.fury.io/js/%40ngx-lite%2Fnav-drawer)
Author: Cory Rylan
Latest version: 14.0.0

# @ngx-lite/nav-drawer

[![npm version](https://badge.fury.io/js/%40ngx-lite%2Fnav-drawer.svg)](https://badge.fury.io/js/%40ngx-lite%2Fnav-drawer)

A lightweight Angular component for simple navigation drawers.

## [Demo]()

## License

MIT © [Cory Rylan](https://coryrylan.com)
npm package: @ngx-lite/progress
Description: [![npm version](https://badge.fury.io/js/%40ngx-lite%2Fprogress.svg)](https://badge.fury.io/js/%40ngx-lite%2Fprogress)
Author: Cory Rylan
Latest version: 14.0.0

# @ngx-lite/progress

[![npm version](https://badge.fury.io/js/%40ngx-lite%2Fprogress.svg)](https://badge.fury.io/js/%40ngx-lite%2Fprogress)

A lightweight Angular component for simple navigation drawers.

## [Demo]()

## License

MIT © [Cory Rylan](https://coryrylan.com)
npm package: @ngx-lite/tabs
Description: [![npm version](https://badge.fury.io/js/%40ngx-lite%2Ftabs.svg)](https://badge.fury.io/js/%40ngx-lite%2Ftabs)
Author: Cory Rylan
Latest version: 14.0.0

# @ngx-lite/tabs

[![npm version](https://badge.fury.io/js/%40ngx-lite%2Ftabs.svg)](https://badge.fury.io/js/%40ngx-lite%2Ftabs)

A Angular tabs component with ability to programmatically set active tabs.

## [Demo]()

## License

MIT © [Cory Rylan](https://coryrylan.com)
npm package: @ngx-loading-bar/core
Description: Automatic page loading / progress bar for Angular
Latest version: 7.0.1

# @ngx-loading-bar/core

A fully automatic loading bar with zero configuration for angular app (http, http-client and router).

#### 1. Install @ngx-loading-bar/core

```bash
  npm install @ngx-loading-bar/core --save
```

#### 2. Import the `LoadingBarModule`:

```ts
import { NgModule } from '@angular/core';

import { LoadingBarModule } from '@ngx-loading-bar/core';

@NgModule({
  ...
  imports: [
    ...

    LoadingBarModule,
  ],
})
export class AppModule {}
```

#### 3. Include `ngx-loading-bar` in your app component:

```ts
import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    ...
    <ngx-loading-bar></ngx-loading-bar>
  `,
})
export class AppComponent {}
```

#### 5. Inject/Use LoadingBarService

```ts
import { Component } from '@angular/core';
import { LoadingBarService } from '@ngx-loading-bar/core';

@Component({
  selector: 'app',
  template: `
    ...
    <ngx-loading-bar></ngx-loading-bar>
    <button (click)="startLoading()">start</button>
    <button (click)="stopLoading()">stop</button>
  `,
})
export class App {
  constructor(private loadingBar: LoadingBarService) {}

  startLoading() {
    this.loadingBar.start();
  }

  stopLoading() {
    this.loadingBar.complete();
  }
}
```

## Related packages

- [@ngx-loading-bar/router](./../../packages/router/README.md) - Display loading bar when navigating between routes.
- [@ngx-loading-bar/http-client](./../../packages/http-client/README.md) - Display the progress of your `@angular/common/http` requests.
- [@ngx-loading-bar/http](./../../packages/http/README.md) - Display the progress of your `@angular/http` requests.
npm package: @ngx-loading-bar/http
Description: Automatic page loading / progress bar for Angular
Latest version: 4.2.0

# @ngx-loading-bar/http

A fully automatic loading bar with zero configuration for angular app (http, http-client and router).

#### 1. Install @ngx-loading-bar/http
```bash
  npm install @ngx-loading-bar/http --save
```

#### 2. Import the `LoadingBarHttpModule`:

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { LoadingBarHttpModule } from '@ngx-loading-bar/http';
import { AppComponent } from './app';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,

    LoadingBarHttpModule,
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
})
export class AppModule {
}

```

#### 3. Include `ngx-loading-bar` in your app component:

```ts
import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    ...
    <ngx-loading-bar></ngx-loading-bar>
  `,
})
export class AppComponent {}

```

## Related packages
- [@ngx-loading-bar/router](./../../packages/router/README.md) - Display loading bar when navigating between routes.
- [@ngx-loading-bar/http-client](./../../packages/http-client/README.md) - Display the progress of your `@angular/common/http` requests.
- [@ngx-loading-bar/core](./../../packages/core/README.md) - Core module to manage the progress bar manually.
npm package: @ngx-loading-bar/http-client
Description: Automatic page loading / progress bar for Angular
Latest version: 7.0.1

# @ngx-loading-bar/http-client

A fully automatic loading bar with zero configuration for angular app (http, http-client and router).

#### 1. Install @ngx-loading-bar/http-client

```bash
  npm install @ngx-loading-bar/http-client --save
```

#### 2. Import the `LoadingBarHttpClientModule`:

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
import { AppComponent } from './app';

@NgModule({
  imports: [BrowserModule, HttpClientModule, LoadingBarHttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

#### 3. Include `ngx-loading-bar` in your app component:

```ts
import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    ...
    <ngx-loading-bar></ngx-loading-bar>
  `,
})
export class AppComponent {}
```

## Related packages

- [@ngx-loading-bar/router](./../../packages/router/README.md) - Display loading bar when navigating between routes.
- [@ngx-loading-bar/http](./../../packages/http/README.md) - Display the progress of your `@angular/http` requests.
- [@ngx-loading-bar/core](./../../packages/core/README.md) - Core module to manage the progress bar manually.
npm package: @ngx-loading-bar/router
Description: Automatic page loading / progress bar for Angular
Latest version: 7.0.1

# @ngx-loading-bar/router

A fully automatic loading bar with zero configuration for angular app (http, http-client and router).

#### 1. Install @ngx-loading-bar/router

```bash
  npm install @ngx-loading-bar/router --save
```

#### 2. Import the `LoadingBarRouterModule`:

```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
import { AppComponent } from './app';

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(...),

    LoadingBarRouterModule,
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
})
export class AppModule {
}

```

#### 3. Include `ngx-loading-bar` in your app component:

```ts
import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    ...
    <ngx-loading-bar></ngx-loading-bar>
  `,
})
export class AppComponent {}
```

## Related packages

- [@ngx-loading-bar/http-client](./../../packages/http-client/README.md) - Display the progress of your `@angular/common/http` requests.
- [@ngx-loading-bar/http](./../../packages/http/README.md) - Display the progress of your `@angular/http` requests.
- [@ngx-loading-bar/core](./../../packages/core/README.md) - Core module to manage the progress bar manually.