open-index/open-npm huggingface dataset:
npm package: @hickorytechnology/ng-refs
Description: Practice better dependency injection of browser APIs within your Angular components and services.
Author: Josh Sullivan
Latest version: 0.0.3

# @hickorytechnology/ng-refs

> **Note**
> This is a fork of the excellent https://github.com/METACEO/ng-refs project made to support updated versions of Angular.

Practice better dependency injection of browser APIs within your Angular codebase!

Are we missing a browser API that your project uses?.. [suggestions and contributions](https://github.com/METACEO/ng-refs/issues) are welcomed!

| Type of use      | Code Example                   |
| ---------------- | ------------------------------ |
| ❌ Direct-use    | ![before](./README-before.png) |
| ✅ Via reference | ![after](./README-after.png)   |

Similar to Angular's [own `DOCUMENT` token](https://angular.io/api/common/DOCUMENT), the `ng-refs` package includes some other commonly used browser APIs wrapped up as Angular providers:

- `AnimationFrameRef`
- `ConsoleRef`
- `GetComputedStyleRef`
- `IntervalRef`
- `LocalStorageRef`
- `LocationRef`
- `SessionStorageRef`
- `TimeoutRef`
- `WindowRef`

In this [Nx](https://nx.dev) monorepo, you can find the following:

- The library source code [[libs](./libs/ng-refs)]
- An example consuming Angular application and unit tests [[apps](./apps/ng-refs-demo)]
- An e2e test suite [[apps](./apps/ng-refs-demo-e2e)]

## Install ng-refs for Angular references

Install these references via [NPM](https://www.npmjs.com/package/ng-refs) or [Yarn](https://yarnpkg.com/package/ng-refs) into your Angular project.

```
npm install ng-refs
```

```
yarn add ng-refs
```

You can then import `NgRefsModule` into your Angular application. You can find an example [here in this repository](./apps/ng-refs-demo/src/app/app.module.ts). You can also import and provide the references directly in your own Angular modules.

## Serve the demo for development

Run `start` for a dev server. Navigate to http://localhost:4200/.

## Build the library for production

Run `ng build ng-refs --prod` to build the library for publishing. The build artifacts will be stored in the `dist/libs/ng-refs` directory.

## Run all required unit tests

Run `affected:test` to execute the unit tests affected by a change.

## Run all required end-to-end tests

Run `affected:e2e` to execute the end-to-end tests affected by a change.
npm package: @hickorytechnology/ng-transition
Description: Transition elements via classes like you would in the Vue and Alpine.js libraries.
Author: Josh Sullivan
Latest version: 0.0.3

# @hickorytechnology/ng-transition

> **Note**
> This is a fork of the excellent https://github.com/METACEO/ng-transition project made to support updated versions of Angular.

> Transition elements via classes like you would in the Vue and Alpine.js libraries.

Click [here](https://ng-transition.herokuapp.com/) for a demo app, via Heroku. You can also find the code of this demo in the `apps/ng-transition-demo` folder of this repository.

## Install

Download `ng-transition` into your Angular project via [NPM](https://www.npmjs.com/package/ng-transition) or [Yarn](https://yarnpkg.com/package/ng-transition):

```shell script
# NPM
npm install @hickorytechnology/ng-transition

# Yarn
yarn add @hickorytechnology/ng-transition
```

## Basic Use

Similar to the modal example found in this repository's demo app, an example modal in your code may look something like the below snippet.

The below is a mixture of custom classes and TailwindCSS utilities. Your transition classes can be totally customized in your CSS or SCSS files, or they can be utility functions like our example.

```html
<!-- We want the entire container to wait to hide before leaving,  -->
<!-- therefore we will specify a `ngTransitionLeave` value that is -->
<!-- also tied to the `openedModal` value.                         -->
<div
  class="modal-container"
  [ngTransition]="openedModal"
  ngTransitionEnter="duration-300"
  ngTransitionLeave="duration-200"
>
  <div
    class="modal-backdrop"
    [ngTransition]="openedModal"
    ngTransitionEnter="ease-out duration-300"
    ngTransitionEnterStart="opacity-0"
    ngTransitionEnterEnd="opacity-100"
    ngTransitionLeave="ease-in duration-200"
    ngTransitionLeaveStart="opacity-100"
    ngTransitionLeaveEnd="opacity-0"
  >
    <div class="modal-backdrop-mask"></div>
  </div>

  <div
    class="modal-content"
    [ngTransition]="openedModal"
    ngTransitionEnter="ease-out duration-300"
    ngTransitionEnterStart="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
    ngTransitionEnterEnd="opacity-100 translate-y-0 sm:scale-100"
    ngTransitionLeave="ease-in duration-200"
    ngTransitionLeaveStart="opacity-100 translate-y-0 sm:scale-100"
    ngTransitionLeaveEnd="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
  >
    ...
  </div>
</div>
```

## Angular Universal

Depending on the Alpine.js source directly resulted in errors when rendering Angular server-side. Find the example server module in the `apps/ng-transition-demo/src/app` folder to see how we replace problematic browser APIs with server-side friendly implementations via the `ng-refs` package.

**If you see the below error when rendering Angular server-side, find our Dependency Injection solution in the aforementioned folder.**

![Angular Universal error with requestAnimationFrame](https://raw.githubusercontent.com/METACEO/ng-transition/master/README-ssr-browser-api-errors.jpg)