open-index/open-npm huggingface dataset:
npm package: @ngxf/connect
Description: NGXF - Non-State Management for Angular
Author: thekiba
Latest version: 9.0.3

<p align="center">
  <img src="https://github.com/ngxf/platform/raw/master/assets/logo.png" width="500px">
  <br />
  NGXF is a non-state management pattern + library for Angular
  <br />
  <br />
  <a href="https://www.npmjs.com/package/@ngxf/platform">
    <img alt="npm (scoped)" src="https://img.shields.io/npm/v/@ngxf/platform.svg?style=flat-square">
  </a>
  <a href="https://travis-ci.com/ngxf/platform">
    <img alt="Travis (.com)" src="https://img.shields.io/travis/com/ngxf/platform.svg?style=flat-square">
  </a>
</p>

## :interrobang: What is NGXF?
NGXF is a non-state management pattern + library for Angular. It acts as a multiple source of
truth for your application's state, providing simple rules for predictable state mutations.

NGXF is modeled after the CQRS pattern popularly implemented in libraries like Redux, NGRX and NGXS
but reduces boilerplate by using modern HTML features such as templates and directives.

## 👋 New to NGXF?
If you're just getting started with NGXF, I recommend you head over to the [concepts](https://ngxf.gitbook.io/platform/concepts/introduction).

## ❓ Need Help?
For questions, please ask them on Stack Overflow with the `ngxf` tag:
https://stackoverflow.com/questions/ask?tags=ngxf

To chat with other users and contributers join us on Telegram: https://t.me/ngSoviet

If you think there is a bug in this library, you can open an issue on GitHub (https://github.com/ngxf/platform/issues/new). If possible a link to a http://stackblitz.com (or github) repo with a repro or a failing test would be great.

## ❤️ Giving Back
Become a [Contributor](https://ngxf.gitbook.io/platform/community/contributing).
npm package: @ngxf/platform
Description: NGXF - Non-State Management for Angular
Author: thekiba
Latest version: 9.0.3

<p align="center">
  <img src="https://github.com/ngxf/platform/raw/master/assets/logo.png" width="500px">
  <br />
  NGXF is a non-state management pattern + library for Angular
  <br />
  <br />
  <a href="https://www.npmjs.com/package/@ngxf/platform">
    <img alt="npm (scoped)" src="https://img.shields.io/npm/v/@ngxf/platform.svg?style=flat-square">
  </a>
  <a href="https://travis-ci.com/ngxf/platform">
    <img alt="Travis (.com)" src="https://img.shields.io/travis/com/ngxf/platform.svg?style=flat-square">
  </a>
</p>

## :interrobang: What is NGXF?
NGXF is a non-state management pattern + library for Angular. It acts as a multiple source of
truth for your application's state, providing simple rules for predictable state mutations.

NGXF is modeled after the CQRS pattern popularly implemented in libraries like Redux, NGRX and NGXS
but reduces boilerplate by using modern HTML features such as templates and directives.

## 👋 New to NGXF?
If you're just getting started with NGXF, I recommend you head over to the [concepts](https://ngxf.gitbook.io/platform/concepts/introduction).

## ❓ Need Help?
For questions, please ask them on Stack Overflow with the `ngxf` tag:
https://stackoverflow.com/questions/ask?tags=ngxf

To chat with other users and contributers join us on Telegram: https://t.me/ngSoviet

If you think there is a bug in this library, you can open an issue on GitHub (https://github.com/ngxf/platform/issues/new). If possible a link to a http://stackblitz.com (or github) repo with a repro or a failing test would be great.

## ❤️ Giving Back
Become a [Contributor](https://ngxf.gitbook.io/platform/community/contributing).
npm package: @ngxf/socket.io
Description: NGXF - Non-State Management for Angular
Author: thekiba
Latest version: 9.0.3

<p align="center">
  <img src="https://github.com/ngxf/platform/raw/master/assets/logo.png" width="500px">
  <br />
  NGXF is a non-state management pattern + library for Angular
  <br />
  <br />
  <a href="https://www.npmjs.com/package/@ngxf/platform">
    <img alt="npm (scoped)" src="https://img.shields.io/npm/v/@ngxf/platform.svg?style=flat-square">
  </a>
  <a href="https://travis-ci.com/ngxf/platform">
    <img alt="Travis (.com)" src="https://img.shields.io/travis/com/ngxf/platform.svg?style=flat-square">
  </a>
</p>

## :interrobang: What is NGXF?
NGXF is a non-state management pattern + library for Angular. It acts as a multiple source of
truth for your application's state, providing simple rules for predictable state mutations.

NGXF is modeled after the CQRS pattern popularly implemented in libraries like Redux, NGRX and NGXS
but reduces boilerplate by using modern HTML features such as templates and directives.

## 👋 New to NGXF?
If you're just getting started with NGXF, I recommend you head over to the [concepts](https://ngxf.gitbook.io/platform/concepts/introduction).

## ❓ Need Help?
For questions, please ask them on Stack Overflow with the `ngxf` tag:
https://stackoverflow.com/questions/ask?tags=ngxf

To chat with other users and contributers join us on Telegram: https://t.me/ngSoviet

If you think there is a bug in this library, you can open an issue on GitHub (https://github.com/ngxf/platform/issues/new). If possible a link to a http://stackblitz.com (or github) repo with a repro or a failing test would be great.

## ❤️ Giving Back
Become a [Contributor](https://ngxf.gitbook.io/platform/community/contributing).
npm package: @ngxgs/connection-status
Description: Provides a simple way to verify when user is online or offline, and listen to these events.
Author: Gabriel de Souza
Latest version: 0.0.6

# Connection Status 

This library provides a very simple way to listen the events of `online` and `offline`. This library is platform-agnostic, that means it's works in Server-Side Rendering (SSR) applications and Web-Wokers. 

## Getting Started

### Install

Run the command: `npm install @ngxgs/connection-status`, inside your application.

### Usage Exemple

```typescript
import { Component, inject } from '@angular/core';
import { ConnectionStatus } from '@ngxgs/connection-status';

@Component({
    ...
})
export class MyComponent {
    connService = inject(ConnectionStatus);
    constructor() {
        this.connService.onStatusChange$.subscribe((event) => {
            // verify if the user go online
            if (event.type === 'online') {
                // do something...
            }

            // verify if the user go offline
            if (event.type === 'offline') {
                // do something else...
            }
        });
    }
}
```

## Contact

### Repository

You can contribute to this library through its GitHub repository: [ngxgs/libraries](https://github.com/ngxgs/libraries.git).

### Author

<div>
    <a href="https://github.com/sougabriel">
        <img src="https://skillicons.dev/icons?i=github" height="32px" alt="GitHub Logo" /> github.com/sougabriel
    </a><br>
    <a href="mailto:gabriel.dsouzapro@gmail.com">
        <img src="https://skillicons.dev/icons?i=gmail" height="32px" alt="Gmail Logo" /> gabriel.dsouzapro@gmail.com
    </a><br>
    <a href="https://www.linkedin.com/in/sougabriels/">
        <img src="https://skillicons.dev/icons?i=linkedin" height="32px" alt="LinkedIn Logo" /> linkedin.com/in/sougabriels
    <a><br>
</div>
npm package: @ngxgs/powered-storage
Description: Provides a service to manage the Local and Session Storage from the WebStorage API
Author: Gabriel de Souza
Latest version: 0.0.4

# Powered Storage

A service for improve the local and session storage of the applications.

## Getting Started

### Install

Run the command: `npm install @ngxgs/powered-storage`, inside your application.

### Usage Exemple

```typescript
import { Component, inject } from '@angular/core';
import { PoweredStorage } from '@ngxgs/powered-storage';

@Component({
    ...
})
export class MyComponent {
    poweredStorage = inject(PoweredStorage);
    constructor() {
        this.poweredStorage.setItem('key', 'value');
        const item = this.poweredStorage.getItem<type>('key');
        if (item) {
            // do something...
        }
    }
}
```

## Contact

### Repository

You can contribute to this library through its GitHub repository: [ngxgs/libraries](https://github.com/ngxgs/libraries.git).

### Author

<div>
    <a href="https://github.com/sougabriel">
        <img src="https://skillicons.dev/icons?i=github" height="32px" alt="GitHub Logo" /> github.com/sougabriel
    </a><br>
    <a href="mailto:gabriel.dsouzapro@gmail.com">
        <img src="https://skillicons.dev/icons?i=gmail" height="32px" alt="Gmail Logo" /> gabriel.dsouzapro@gmail.com
    </a><br>
    <a href="https://www.linkedin.com/in/sougabriels/">
        <img src="https://skillicons.dev/icons?i=linkedin" height="32px" alt="LinkedIn Logo" /> linkedin.com/in/sougabriels
    <a><br>
</div>
npm package: @ngxgs/style-manager
Description: Provides a easy way to manage dynamically stylesheets
Author: Gabriel de Souza
Latest version: 0.0.4

# Style Manager 

Use this injectable class for easily add and remove stylesheets on your Angular application, managing these elements by they key.

**Warning.** This is a re-work of [material.angular.io](https://github.com/angular/material.angular.io) style-manager service, powered by the Renderer2 Angular API for Server-Side Rendering applications. 

## Getting Started

### Install

Run the command: `npm install @ngxgs/style-manager`, inside your application.

### Usage Exemple

```typescript
import { Component, inject } from '@angular/core';
import { StyleManager } from 'ngx-style-manager';

@Component({
    ...
})
export class MyComponent {
    styleManager = inject(StyleManager);

    constructor() {
        this.styleManager.setStyle('theme-class', 'path/to/style.css');
    }
}
```

## Contact

### Repository

You can contribute to this library through its GitHub repository: [sougabriel/ngx-libraries](https://github.com/sougabriel/ngx-libraries).

### Author

<div>
    <a href="https://github.com/sougabriel">
        <img src="https://skillicons.dev/icons?i=github" height="32px" alt="GitHub Logo" /> github.com/sougabriel
    </a><br>
    <a href="mailto:gabriel.dsouzapro@gmail.com">
        <img src="https://skillicons.dev/icons?i=gmail" height="32px" alt="Gmail Logo" /> gabriel.dsouzapro@gmail.com
    </a><br>
    <a href="https://www.linkedin.com/in/sougabriels/">
        <img src="https://skillicons.dev/icons?i=linkedin" height="32px" alt="LinkedIn Logo" /> linkedin.com/in/sougabriels
    <a><br>
</div>
npm package: @ngxhelpers/dropdown
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.0.
Latest version: 1.0.3

# Dropdown

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.0.

## Code scaffolding

Run `ng generate component component-name --project dropdown` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project dropdown`.
> Note: Don't forget to add `--project dropdown` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build dropdown` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build dropdown`, go to the dist folder `cd dist/dropdown` and run `npm publish`.

## Running unit tests

Run `ng test dropdown` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @ngxhelpers/dynamic-forms
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.0.
Latest version: 1.0.3

# DynamicForms

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.0.

## Code scaffolding

Run `ng generate component component-name --project dynamic-forms` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project dynamic-forms`.
> Note: Don't forget to add `--project dynamic-forms` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build dynamic-forms` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build dynamic-forms`, go to the dist folder `cd dist/dynamic-forms` and run `npm publish`.

## Running unit tests

Run `ng test dynamic-forms` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @ngxhelpers/input-stepper
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.0.
Latest version: 1.0.3

# InputStepper

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.0.

## Code scaffolding

Run `ng generate component component-name --project input-stepper` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project input-stepper`.
> Note: Don't forget to add `--project input-stepper` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build input-stepper` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build input-stepper`, go to the dist folder `cd dist/input-stepper` and run `npm publish`.

## Running unit tests

Run `ng test input-stepper` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @ngxhelpers/multi-filter
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.0.
Latest version: 1.0.5

# MultiFilter

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.0.

## Code scaffolding

Run `ng generate component component-name --project multi-filter` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project multi-filter`.
> Note: Don't forget to add `--project multi-filter` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build multi-filter` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build multi-filter`, go to the dist folder `cd dist/multi-filter` and run `npm publish`.

## Running unit tests

Run `ng test multi-filter` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @ngxhelpers/time-picker
Description: This directive provides a time picker functionality to input elements, allowing users to select a time value easily. It uses the `@ngxhelpers/overlay` library for the overlay and `moment.js` for time formatting.
Latest version: 1.0.4

# NgxTimePickerDirective

This directive provides a time picker functionality to input elements, allowing users to select a time value easily. It uses the `@ngxhelpers/overlay` library for the overlay and `moment.js` for time formatting.

## Installation

Make sure you have the required peer dependencies:

```bash
npm install @ngxhelpers/overlay moment
```

## Usage

1. **Import and add `NgxTimePickerDirective` to your component's `imports` array:**

    ```typescript
    import { NgxTimePickerDirective } from '@ngxhelpers/time-picker';

    @Component({
        // ...
        standalone: true,
        imports: [NgxTimePickerDirective, // ...other imports]
        // ...
    })
    export class MyComponent { }
    ```

2. **Apply the directive to an input element:**

    ```html
    <input
    	type="text"
    	ngxTimePicker
    	[outputFormat]="'HH:mm:ss'"
    	[displayFormat]="'hh:mm:ss A'"
    	[(ngModel)]="selectedTime"
    />
    ```

## Inputs

-   `outputFormat`: The format of the output value (using moment.js formats). Defaults to 'HH:mm'.
-   `displayFormat`: The format of the time displayed in the time picker. Defaults to 'hh:mm A'.
-   `minuteStep`: The increment step for minutes. Defaults to 5.
-   `secondsView`: Whether to show seconds in the time picker. Defaults to false.
-   `options`: Additional options can be passed to customize the time picker's internal behavior.
    -   Currently supports one option `defaultTime` to set the initially selected time when opening the picker.
    -   Example: `[options]="{defaultTime: '14:30'}"`
-   `panelClass`: Custom CSS classes to add to the time picker panel. Defaults to `[]`.
-   `origin`: An optional HTMLElement to use as the origin for positioning the popover. Defaults to the input element the directive is attached to.
-   `displayHours`: Whether to display hours in 12-hour (with AM/PM) or 24-hour format. Can be 12 or 24. Defaults to 24. (Sets the time picker display, not the `outputFormat`)

## Outputs

-   `outsideClick`: Emits when a click occurs outside of the time picker.
-   `keyboardEvent`: Emits keyboard events from within the time picker. You can use this to handle custom keyboard navigation.
-   `select`: Emits the selected time value when a time is chosen. The emitted value is an object:

**Example Custom format:**

```html
<input type="text"
ngxTimePicker
[outputFormat]="'HH:mm'" <!-- Output in 24-hour format -->
[displayFormat]="'hh:mm A'" <!-- Display with AM/PM -->
[(ngModel)]="selectedTime">

<p>Selected Time (24-hour format): {{ selectedTime }}</p>
```