open-index/open-npm huggingface dataset:
npm package: @ng-web-apis/common
Description: A set of common utils for consuming Web APIs with Angular
Author: Alex Inkin
Latest version: 5.2.0

# ![logo](https://raw.githubusercontent.com/taiga-family/ng-web-apis/main/libs/common/logo.svg) Common utils for Web APIs

[![npm version](https://img.shields.io/npm/v/@ng-web-apis/common.svg)](https://npmjs.com/package/@ng-web-apis/common)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@ng-web-apis/common)](https://bundlephobia.com/result?p=@ng-web-apis/common)
[![codecov](https://codecov.io/github/taiga-family/ng-web-apis/graph/badge.svg?flag=common)](https://codecov.io/github/taiga-family/ng-web-apis/tree/main/libs/common)

A set of common utils for consuming Web APIs with Angular

## Tokens

- `WA_WINDOW` — provides access to global `window` object
- `WA_NAVIGATOR` — provides access to `window.navigator` object
- `WA_NETWORK_INFORMATION` — provides access to `window.navigator.connection` object
- `WA_USER_AGENT` — provides access to `window.navigator.userAgent` string
- `WA_MEDIA_DEVICES` — provides access to `window.navigator.mediaDevices` object
- `WA_PERFORMANCE` — provides access to `window.performance` object
- `WA_ANIMATION_FRAME` — shared `Observable` based on `window.requestAnimationFrame`
- `WA_CACHES` — provides access to `window.caches` object
- `WA_CSS` — provides access to `window.CSS` object or mock object if it's not available (i.e. in IE)
- `WA_CRYPTO` — provides access to `window.crypto` object
- `WA_LOCATION` — provides access to `window.location` object
- `WA_LOCAL_STORAGE` — provides access to `window.localStorage` object
- `WA_SCREEN` — provides access to `window.screen` object
- `WA_SESSION_STORAGE` — provides access to `window.sessionStorage` object
- `WA_SPEECH_RECOGNITION` — provides access to `SpeechRecognition` class or returns `null` if browser does not support
  it
- `WA_SPEECH_SYNTHESIS` — provides access to `window.speechSynthesis` object
- `WA_PAGE_VISIBILITY` — wrapper for `document.addEventListener('visibilityChange')` api
- `WA_HISTORY` — provides access to `window.history` object
npm package: @ng-web-apis/experimental
Description: This is an experimental technology with Angular
Author: Alex Inkin
Latest version: 5.2.0

# ![logo](https://raw.githubusercontent.com/taiga-family/ng-web-apis/main/libs/experimental/logo.svg) experimental utils for Web APIs

[![npm version](https://img.shields.io/npm/v/@ng-web-apis/experimental.svg)](https://npmjs.com/package/@ng-web-apis/common)

A set of experimental utils for consuming Web APIs with Angular

## Tokens

- `WA_DOCUMENT_PIP` — The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be
  populated with arbitrary HTML content
npm package: @ng-web-apis/notification
Description: A library for declarative use of Notification API with Angular
Author: Nikita Barsukov
Latest version: 5.2.0

# ![ng-web-apis logo](https://raw.githubusercontent.com/taiga-family/ng-web-apis/main/libs/notification/logo.svg) Notification API for Angular

[![npm version](https://img.shields.io/npm/v/@ng-web-apis/notification.svg)](https://npmjs.com/package/@ng-web-apis/notification)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@ng-web-apis/notification)](https://bundlephobia.com/result?p=@ng-web-apis/notification)
[![codecov](https://codecov.io/github/taiga-family/ng-web-apis/graph/badge.svg?flag=notification)](https://codecov.io/github/taiga-family/ng-web-apis/tree/main/libs/notification)

This is a library for declarative use of
[Notification API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API) with Angular.

## Install

```bash
npm i @ng-web-apis/notification
```

## Usage

1. Import the `WaNotificationService` into your Angular component or service where you want to use it.

```ts
import {WaNotificationService} from '@ng-web-apis/notification';
```

2. Inject the `WaNotificationService` into your component.

```ts
// via inject
notificationAPIService = inject(WaNotificationService);
```

3. Use the `requestPermission` and `open` methods to request permission and open a notification.

```ts
this.notificationAPIService
  .requestPermission()
  .pipe(
    filter((permission) => permission === 'granted'),
    switchMap(() =>
      this.notificationAPIService.open('Hello world!', {
        body: 'This is a notification',
        requireInteraction: true,
      }),
    ),
  )
  .subscribe();
```

## Demo

You can [try online demo here](https://taiga-family.github.io/ng-web-apis/notification)

## See also

Other [Web APIs for Angular](https://taiga-family.github.io/ng-web-apis/) by
[@ng-web-apis](https://github.com/taiga-family/ng-web-apis)
npm package: @ng-web-apis/platform
Description: A basic library for web apis
Latest version: 5.2.0

# ![ng-web-apis logo](https://raw.githubusercontent.com/taiga-family/ng-web-apis/main/libs/platform/logo.svg) Platform

## Install

```bash
npm i @ng-web-apis/platform
```

## Tokens

- `WA_IS_MOBILE`
- `WA_IS_IOS`
- `WA_IS_ANDROID`
- `WA_IS_WEBKIT`
npm package: @ng-web-apis/screen-orientation
Description: A library for declarative use of screen orientation with Angular
Author: Maksim Ivanov
Latest version: 5.2.0

# ![ng-web-apis logo](https://raw.githubusercontent.com/taiga-family/ng-web-apis/main/libs/screen-orientation/logo.svg) Screen Orientation API for Angular

## Install

```bash
npm i @ng-web-apis/screen-orientation
```

## Examples

```ts
import {inject} from '@angular/core';
import {WaScreenOrientationService} from '@ng-web-apis/screen-orientation';

// ...
export class Example {
  protected readonly orientation$ = inject(WaScreenOrientationService);
}
```

```html
<p>{{ orientation$ | async }}</p>
```
npm package: @ng-web-apis/storage
Description: A library to use Web Storage API with Observables
Author: Alexander Inkin
Latest version: 5.2.0

# ![ng-web-apis logo](https://raw.githubusercontent.com/taiga-family/ng-web-apis/main/libs/storage/logo.svg) Web Storage API for Angular

[![npm version](https://img.shields.io/npm/v/@ng-web-apis/storage.svg)](https://npmjs.com/package/@ng-web-apis/storage)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@ng-web-apis/storage)](https://bundlephobia.com/result?p=@ng-web-apis/storage)
[![codecov](https://codecov.io/github/taiga-family/ng-web-apis/graph/badge.svg?flag=storage)](https://codecov.io/github/taiga-family/ng-web-apis/tree/main/libs/storage)

This is a library to use [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) with
Angular.

## Install

If you do not have [@ng-web-apis/common](https://github.com/taiga-family/ng-web-apis/tree/main/libs/common):

```bash
npm i @ng-web-apis/common
```

Now install the package:

```bash
npm i @ng-web-apis/storage
```

## How to use

Web Storage API consists of storage synthesis and storage recognition.

1. Use `WA_STORAGE_EVENT` token to inject an `Observable` of
   [`StorageEvent`](https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent).
2. Use `filterByKey` and `toValue` utility operators to work with this `Observable`.
3. Native `StorageEvent` only fires when changes are made from another tab. To capture events from the same tab use
   `WaStorageService` to work with `localStorage`

See [demo](https://taiga-family.github.io/ng-web-apis/storage) for concrete usage example.

## See also

Other [Web APIs for Angular](https://taiga-family.github.io/ng-web-apis/) by
[@ng-web-apis](https://github.com/taiga-family/ng-web-apis)
npm package: @ng-web-apis/universal
Description: A set of fallback for @ng-web-apis/common for Angular Universal
Author: Alex Inkin
Latest version: 5.2.0

# ![logo](https://raw.githubusercontent.com/taiga-family/ng-web-apis/main/libs/universal/logo.svg) Angular Universal fallbacks

[![npm version](https://img.shields.io/npm/v/@ng-web-apis/universal.svg)](https://npmjs.com/package/@ng-web-apis/universal)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@ng-web-apis/universal)](https://bundlephobia.com/result?p=@ng-web-apis/universal)
[![codecov](https://codecov.io/github/taiga-family/ng-web-apis/graph/badge.svg?flag=universal)](https://codecov.io/github/taiga-family/ng-web-apis/tree/main/libs/universal)

A set of fallbacks to seamlessly use
[@ng-web-apis/common](https://github.com/taiga-family/ng-web-apis/tree/main/libs/common) in
[Angular Universal](https://github.com/angular/universal) apps. These packages have synced versions down to minor.

## How to use

Add constants imported from this package to providers of your `ServerAppModule`. Typically, you can also use these mocks
for tests. Idea of this package is — you shouldn't have to mock DOM on the server side or test `isPlatformBrowser` all
the time. Instead, you leverage Angular DI system to abstract from implementation. When possible, this package will
provide the same functionality on the server side as you have in browser. In other cases you will get type-safe mocks
and you can at least be sure you will not have `cannot read property of null` or `undefined is not a function` errors in
SSR.

## Tokens

You can provide universal providers in the following manner:

```ts
import {provideUniversal} from '@ng-web-apis/universal';

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(),
    provideUniversal(), // <-- add this
  ],
};

const config = mergeApplicationConfig(appConfig, serverConfig);
const bootstrap = () => bootstrapApplication(AppComponent, config);
```

## Special cases

When you use plain SSR without prerender you can retrieve some of the information from requests. Use the following
helpers to harvest that info:

**server.ts:**

```ts
import {provideLocation, provideUserAgent} from '@ng-web-apis/universal';

// ...

app.get('/**/*', (req: Request, res: Response) => {
  res.render('../dist/index', {
    req,
    res,
    providers: [provideLocation(req), provideUserAgent(req)],
  });
});
```

> ⚠️ **Note:** If you're using `AngularNodeAppEngine`, you **don't need** to manually call `provideLocation` or
> `provideUserAgent` — these tokens rely on the REQUEST token and are already properly provided by the engine.
npm package: @ng-web-apis/view-transition
Description: This is a library for declarative use of View Transition API with Angular
Author: Vsevolod Arutiunov
Latest version: 5.2.0

# ![ng-web-apis logo](https://raw.githubusercontent.com/taiga-family/ng-web-apis/main/libs/view-transition/logo.svg) View Transition API for Angular

[![npm version](https://img.shields.io/npm/v/@ng-web-apis/view-transition.svg)](https://npmjs.com/package/@ng-web-apis/view-transition)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@ng-web-apis/view-transition)
[![codecov](https://codecov.io/github/taiga-family/ng-web-apis/graph/badge.svg?flag=view-transition)](https://codecov.io/github/taiga-family/ng-web-apis/tree/main/libs/view-transition)

This service is an abstraction over
[view transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) for Angular

## Install

```bash
npm i @ng-web-apis/view-transition
```

## How to use

1. Import the `WaViewTransitionService` into your Angular component or service where you want to use it.

```ts
import {WaViewTransitionService} from '@ng-web-apis/view-transition';
```

2. Inject the `WaViewTransitionService` into your component's constructor or with `inject` (Angular 14+).

```ts
// in constructor
constructor(private viewTransitionService: WaViewTransitionService) {}

// via inject
viewTransitionService = inject(WaViewTransitionService);
```

3. Use the `startViewTransition` method to initiate a view transition. This method takes a callback function that
   returns a `Promise<void>` or `void`. You can perform any necessary DOM changing logic within this callback.

```ts
startTransition() {
  this.viewTransitionService.startViewTransition(() => {
    // Your DOM changing logic goes here
    return this.animateTransition();
  }).subscribe({
    next: (transition) => {
      // Callback is done and transition is about to begin
      console.log('View transition is about to begin:', transition);
    },
    complete: () => {
      console.log('View transition completed');
    },
    error: (error) => {
      // Handle any errors that occur during the transition
      console.error('View transition error:', error);
    },
  });
}
```

## Demo

You can [try online demo here](https://taiga-family.github.io/ng-web-apis/view-transition)

## See also

Other [Web APIs for Angular](https://taiga-family.github.io/ng-web-apis/) by
[@ng-web-apis](https://github.com/taiga-family/ng-web-apis)
npm package: @ng-web-apis/workers
Description: A library for comfortable use of Web Workers API in Angular
Author: Igor Katsuba
Latest version: 5.2.0

# ![ng-web-apis logo](https://raw.githubusercontent.com/taiga-family/ng-web-apis/main/libs/workers/logo.svg) Web Workers API for Angular

[![npm version](https://img.shields.io/npm/v/@ng-web-apis/workers.svg)](https://npmjs.com/package/@ng-web-apis/workers)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@ng-web-apis/workers)](https://bundlephobia.com/result?p=@ng-web-apis/workers)
[![codecov](https://codecov.io/github/taiga-family/ng-web-apis/graph/badge.svg?flag=workers)](https://codecov.io/github/taiga-family/ng-web-apis/tree/main/libs/workers)

This is a library for comfortable use of
[Web Workers API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) with Angular.

## Install

If you do not have [@ng-web-apis/common](https://github.com/taiga-family/ng-web-apis/tree/main/libs/common):

```bash
npm i @ng-web-apis/common
```

Now install the package:

```bash
npm i @ng-web-apis/workers
```

## How it use

Create a worker and use it in a template with `AsyncPipe`:

```ts
import {WaWebWorker} from '@ng-web-apis/workers';

function compute(data: number): number {
  return data ** 2;
}

@Component({
  template: `
    Computed Result:
    <ng-container *ngIf="worker | async as event">{{ event.data }}</ng-container>
    <form (ngSubmit)="worker.postMessage(input.value)">
      <input #input />
      <button type="submit">Send to worker</button>
    </form>
  `,
})
class My {
  readonly worker = WaWebWorker.fromFunction<number, number>(compute);
}
```

To get data from the worker event, use the toData operator

```ts
import {toData, WaWebWorker} from '@ng-web-apis/workers';

function compute(data: number): number {
  return data ** 2;
}

@Component({
  template: `
    Computed Result: {{ workerData$ | async }}
    <form (ngSubmit)="worker.postMessage(input.value)">
      <input #input />
      <button type="submit">Send to worker</button>
    </form>
  `,
})
class My {
  readonly worker = WaWebWorker.fromFunction<number, number>(compute);
  readonly workerData$ = this.worker.pipe(toData());
}
```

It's the same with `WaWorkerPipe` only:

```ts
import {WorkerModule} from '@ng-web-apis/workers';
import {NgModule} from '@angular/core';

@NgModule({
  imports: [WorkerModule],
  declarations: [My],
})
class SomeModule {}
```

```ts
import {WorkerExecutor, WaWebWorker} from '@ng-web-apis/workers';
import {FormControl} from '@angular/forms';

@Component({
  template: `
    Computed Result: {{ value | waWorker: changeData | async }}

    <input [(ngModel)]="value" />
  `,
})
class My {
  value: string;

  changeData(data: string): string {
    return `${data} (changed)`;
  }
}
```

## See also

Other [Web APIs for Angular](https://taiga-family.github.io/ng-web-apis/) by
[@ng-web-apis](https://github.com/taiga-family/ng-web-apis)