open-index/open-npm huggingface dataset:
npm package: @ngx-extensions/count-up.js
Description: Wrapper module for countup.js
Latest version: 0.1.0

# @ngx-extensions/countup.js

A wrapper module for [countup.js](https://github.com/inorganik/countUp.js)

## Installation

```bash
npm install @ngx-extensions/count-up.js
```

## Setup

Import `NgxCountUpModule` into your module:

````typescript
import { NgxCountUpModule } from '@ngx-extensions/count-up.js';

@NgModule({
  imports: [NgxCountUpModule]
})
export class AppModule {}
````

## Usage

A simple use case looks as follows

````typescript
@Component({
  template: `
    <span ngxCountUp startValue="0" endValue="100" duration="3"></span>
  `
})
export class DemoComponent {}
````
npm package: @ngx-extensions/extensions
Description: Reusable angular elements
Latest version: 0.1.0

# @ngx-extensions/extensions

Utility directives, pipes and services that extend some of the functionalities of common Angular modules.

## Install

```bash
npm install @ngx-extensions/extensions
```

## Modules

- [NgxCommonModule](./src/lib/common/README.md) - Elements that could be considered part of the `@angular/common` package
- [NgxRouterModule](./src/lib/router/README.md) - Elements that could be considered part of the `@angular/router` package
- [NgxFormsModule](./src/lib/forms/README.md) - Elements that could be considered part of the `@angular/forms` package
npm package: @ngx-extensions/screenfull
Description: Wrapper module for screenfull
Latest version: 0.1.0

# @ngx-extensions/screenfull

A simple wrapper around [screenfull.js](https://github.com/sindresorhus/screenfull.js) for Angular.

## Installation

```bash
npm install @ngx-extensions/screenfull
```

## Setup

Import `NgxScreenfullModule` into your module

```typescript
import { NgxScreenfullModule } from '@ngx-extensions/screenfull';

@NgModule({
 imports: [NgxScreenfullModule]
})
export class AppModule {}
```

## Usage

The most basic use case is to toggle the fullscreen mode through an element´s click event:

```html
<button ngxToggleFullscreen>Toggle fullscreen</button>
```

_Note: the host element of `ngxToggleFullscreen` does not necessarily have to be a `<button>`_

The state of the fullscreen mode can be tracked through the `ScreenfullService`

```typescript
import { ScreenfullService } from '@ngx-extensions/screenfull';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
 template: `
    <span>Screenfull mode is currently {{ mode$ | async }}</span>
  `
})
export class DemoComponent {
 readonly mode$: Observable<string>;

 constructor(public readonly screenfullService: ScreenfullService) {
  this.mode$ = this.screenfullService.fullScreenActive$.pipe(
   map(active => (active ? 'active' : 'inactive'))
  );
 }
}
```

To interact with the fullscreen API, use the `ScreenfullService`:

```typescript
import { ScreenfullService } from '@ngx-extensions/screenfull';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
 template: `
    <button (click)="screenfullService.request()">Enter fullscreen</button>
    <button (click)="screenfullService.exit()">Exit fullscreen</button>
    <button (click)="screenfullService.toggle()">Toggle fullscreen</button>
    <span>Screenfull mode is currently: {{ mode$ | async }}</span>
  `
})
export class DemoComponent {
 readonly mode$: Observable<string>;

 constructor(public readonly screenfullService: ScreenfullService) {
  this.mode$ = this.screenfullService.fullScreenActive$.pipe(
   map(active => (active ? 'active' : 'inactive'))
  );
 }
}
```
npm package: @ngx-factory/differs
Description: Iterable and key value differs
Author: LastStone
Latest version: 0.0.1

# Differs

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.1.

## Code scaffolding

Run `ng generate component component-name --project differs` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project differs`.
> Note: Don't forget to add `--project differs` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build differs` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build differs`, go to the dist folder `cd dist/differs` and run `npm publish`.

## Running unit tests

Run `ng test differs` 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 README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @ngx-firebase-web-authn/functions
Description: An unofficial AngularFire extension for authentication with WebAuthn passkeys.
Author: Gavin Sawyer
Latest version: 15.7.1

## @ngx-firebase-web-authn/functions
An unofficial AngularFire extension for authentication with WebAuthn passkeys.

### Deprecated: This project is now [FirebaseWebAuthn](https://github.com/gavinsawyer/firebase-web-authn) version 9.
This package contains a Firebase Function used to facilitate registering, authenticating, reauthenticating WebAuthn passkeys, and clearing data if the user cancels the process or unlinks a passkey.

Public keys are stored in the `webAuthnUsers` collection in Firestore. Setup doesn't require you to modify any Firestore rules. Your app should use a separate `users`/`profiles` collection to store user information.
### Deployment
From your Firebase Functions package root, run:

`% npm install @ngx-firebase-web-authn/functions --save`

Re-export the function from your `functions/index.ts` file.
```ts
import { initializeApp } from 'firebase-admin/app';


initializeApp();

export { ngxFirebaseWebAuthn } from '@ngx-firebase-web-authn/functions';

// Other functions...
```
Deploy your Firebase Functions:

`% firebase deploy --only functions`
### Usage
For the browser to reach ngxFirebaseWebAuthn, modify your `firebase.json` to include a rewrite on each app where you'd like to use passkeys.
```json
{
  "hosting": [
    {
      "target": "...",
      "rewrites": [
        {
          "source": "/ngxFirebaseWebAuthn",
          "function": "ngxFirebaseWebAuthn"
        }
      ]
    }
  ]
}
```
### Google Cloud setup
- Enable the Anonymous authentication provider in Firebase if you are not using it already.
- Add the `Service Account Token Creator` role to your Firebase Functions' service account in [GCP IAM project permissions](https://console.cloud.google.com/iam-admin/iam). This is either the `Default compute service account` or the `App Engine default service account`, and can be seen under "Runtime service account" in [GCP Cloud Function configuration](https://console.cloud.google.com/functions/list) after deployment.
npm package: @ngx-firebase/client
Description: Firebase SDK client for Angular
Author: Aventura Tech / Forrest Lyman
Latest version: 1.0.1

# NgxFirebaseClient

The Firebase Client provides a configurable instance of the official Firebase SDK to Angular.

We built this because we prefer to use core SDKs for Firebase over more opinionated packages.

* All of the Firebase documentation is valid
* The API is much closer to the NodeJS admin API, making full stack development easier
* The skills you gain developing are relevant on any platform

## Installation

First install the firebase SDK and NgxFirebaseClient modules:

```shell script
npm i firebase @ngx-firebase/client
```

Then import the module in your root app module:

```typescript
// src/app/app.module.ts
...
import {NgxFirebaseClientModule} from '@ngx-firebase/client';
...
imports: [
  BrowserModule,
  NgxFirebaseClientModule.forRoot({
    apiKey: "#####",
    authDomain: "#####",
    databaseURL: "#####",
    projectId: "#####",
    storageBucket: "#####",
    messagingSenderId: "#####",
    appId: "#####",
    measurementId: "#####",
  })
],
...
```

Now you are ready to use the SDK in your components

```typescript
// src/app/app.component.ts
import {NgxFirebaseClientService} from '@ngx-firebase/client';
...
export class AppComponent {
  constructor(private firebase: NgxFirebaseClientService) {
    // do something with the SDK
  }
}
```
npm package: @ngx-formly-builder/core
Description: Embeddable Angular Formly visual builder component and core APIs.
Latest version: 0.4.1

# @ngx-formly-builder/core

Embeddable Angular standalone Formly visual builder.

## Usage

```ts
import { FormlyBuilderComponent } from '@ngx-formly-builder/core';
```

```html
<formly-builder [config]="config" (configChange)="config = $event" />
```
npm package: @ngx-gallery/core
Description: Angular gallery directive that hooks the lightbox with the images automatically.
Author: Murhaf Sousli
Latest version: 5.0.0-beta.0

<p align="center">
  <img width="150px" src="https://user-images.githubusercontent.com/8130692/36171173-ad0da54c-1112-11e8-85bf-843c5f70efdc.png" style="max-width:100%;">
</p>
<h1 align="center">Angular Gallery</h1>

<p align="center">Simplifies the process of creating beautiful image galleries for the web and mobile devices.</p>


[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-gallery/)
[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-gallery)
[![npm](https://img.shields.io/npm/v/@ngx-gallery/core.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/@ngx-gallery/core)
[![Travis branch](https://travis-ci.org/MurhafSousli/ngx-gallery.svg?branch=master)](https://travis-ci.org/MurhafSousli/ngx-gallery)
[![npm](https://img.shields.io/npm/dt/@ngx-gallery/core.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/@ngx-gallery/core)
[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)


- **For version 3.x**, see the [WIKI](https://github.com/MurhafSousli/ngx-gallery/wiki)
- **For version 2.x**, see the [WIKI](https://github.com/MurhafSousli/ngx-gallery/wiki) and check the [changelog](/CHANGELOG.md) for the changes
- **For version 1.x**, see this [DOCS](/README_V1.md)

## Support

[![npm](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/bePatron?u=5594898)

## Issues

If you identify any errors in this module, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/@ngx-gallery/core/issues).

## Author

 **[Murhaf Sousli](http://murhafsousli.com)**

- [github/murhafsousli](https://github.com/MurhafSousli)
- [twitter/murhafsousli](https://twitter.com/MurhafSousli)
npm package: @ngx-gallery/gallerize
Description: Angular gallery directive that hooks the lightbox with the images automatically.
Author: Murhaf Sousli
Latest version: 5.0.0-beta.0

<p align="center">
  <img width="150px" src="https://user-images.githubusercontent.com/8130692/36171173-ad0da54c-1112-11e8-85bf-843c5f70efdc.png" style="max-width:100%;">
</p>
<h1 align="center">Angular Gallery</h1>

<p align="center">Simplifies the process of creating beautiful image galleries for the web and mobile devices.</p>


[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-gallery/)
[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-gallery)
[![npm](https://img.shields.io/npm/v/@ngx-gallery/core.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/@ngx-gallery/core)
[![Travis branch](https://travis-ci.org/MurhafSousli/ngx-gallery.svg?branch=master)](https://travis-ci.org/MurhafSousli/ngx-gallery)
[![npm](https://img.shields.io/npm/dt/@ngx-gallery/core.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/@ngx-gallery/core)
[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)


- **For version 3.x**, see the [WIKI](https://github.com/MurhafSousli/ngx-gallery/wiki)
- **For version 2.x**, see the [WIKI](https://github.com/MurhafSousli/ngx-gallery/wiki) and check the [changelog](/CHANGELOG.md) for the changes
- **For version 1.x**, see this [DOCS](/README_V1.md)

## Support

[![npm](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/bePatron?u=5594898)

## Issues

If you identify any errors in this module, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/@ngx-gallery/core/issues).

## Author

 **[Murhaf Sousli](http://murhafsousli.com)**

- [github/murhafsousli](https://github.com/MurhafSousli)
- [twitter/murhafsousli](https://twitter.com/MurhafSousli)
npm package: @ngx-gallery/lightbox
Description: Angular gallery directive that hooks the lightbox with the images automatically.
Author: Murhaf Sousli
Latest version: 5.0.0-beta.0

<p align="center">
  <img width="150px" src="https://user-images.githubusercontent.com/8130692/36171173-ad0da54c-1112-11e8-85bf-843c5f70efdc.png" style="max-width:100%;">
</p>
<h1 align="center">Angular Gallery</h1>

<p align="center">Simplifies the process of creating beautiful image galleries for the web and mobile devices.</p>


[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-gallery/)
[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-gallery)
[![npm](https://img.shields.io/npm/v/@ngx-gallery/core.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/@ngx-gallery/core)
[![Travis branch](https://travis-ci.org/MurhafSousli/ngx-gallery.svg?branch=master)](https://travis-ci.org/MurhafSousli/ngx-gallery)
[![npm](https://img.shields.io/npm/dt/@ngx-gallery/core.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/@ngx-gallery/core)
[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)


- **For version 3.x**, see the [WIKI](https://github.com/MurhafSousli/ngx-gallery/wiki)
- **For version 2.x**, see the [WIKI](https://github.com/MurhafSousli/ngx-gallery/wiki) and check the [changelog](/CHANGELOG.md) for the changes
- **For version 1.x**, see this [DOCS](/README_V1.md)

## Support

[![npm](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/bePatron?u=5594898)

## Issues

If you identify any errors in this module, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/@ngx-gallery/core/issues).

## Author

 **[Murhaf Sousli](http://murhafsousli.com)**

- [github/murhafsousli](https://github.com/MurhafSousli)
- [twitter/murhafsousli](https://twitter.com/MurhafSousli)