# @ngular/screen

> ## Observing the changes of screen (MediaQuery Based)

Latest version **0.1.4** (published 2022-10-16) · 0 weekly downloads

## Install

```sh
npm install @ngular/screen
pnpm add @ngular/screen
yarn add @ngular/screen
bun add @ngular/screen
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2022-10-16 |
| First published | 2020-04-03 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 345.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | neulchance, tazgong |

## Links

- npm: https://www.npmjs.com/package/@ngular/screen
- npm.io page: https://npm.io/package/@ngular/screen

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 0.1.4 (latest) — 2022-10-16
- 0.1.3 — 2022-10-16
- 0.1.2 — 2022-10-16
- 0.1.1 — 2022-10-11
- 0.1.0 — 2022-10-10
- 0.0.3 — 2020-11-22
- 0.0.2 — 2020-04-03

## README

# @ngular/screen

## Observing the changes of screen (MediaQuery Based)

This package generated for Angular.

This package excerpts the code from part of 'angular/flex-layout' \
The 'angular/flex-layout' have a function as a core that screen observing. \
'@ngular/screen' only use its mediaQuery observing functionality.
  ```sh
$ yarn add @ngular/screen
or
$ npm i @ngular/screen
```

Usage snippet
```ts
import { Injectable } from '@angular/core';
import {
  ScreenObserver, ScreenObserved,
  DEFAULT_BREAKPOINTS_ALIAS as DeBrAlias,
} from '@ngular/screen';

@Injectable()
export class ApplayoutService {

  constructor(
    private screenObserver: ScreenObserver,
  ) {
    this.screenObserver.asObservable().pipe(
    ).subscribe((changes: ScreenObserved[]) => {
      /**
       * Feel the changes in here.
       * You can see the changes in precedence of the order according to priority.
       * Via below link you can check the MediaQuery Range Prioritization (breakpoint-activation-fallback-algorithm).
       * https://github.com/angular/flex-layout/wiki/Responsive-API#breakpoint-activation-fallback-algorithm
       */
      console.log(changes);
    });
  }
}
```

<details>
<summary>한국어 설명</summary>
이 패키지는 'Angular 프레임워크'를 사용한다는 기준으로 생성되었습니다.

'@ngular/screen 패키지'는 'screen observing 기능'을 제공합니다. \
'Angular 프레임워크 프로젝트'의 하나인 '@angular/flex-layout 프로젝트'에서 제공하는 핵심 기능중 
'mediaQuery observing'기능을 발췌하여 작성 했습니다.

사용법 스닙펫
```ts
import { Injectable } from '@angular/core';
import {
  ScreenObserver, ScreenObserved,
  DEFAULT_BREAKPOINTS_ALIAS as DeBrAlias,
} from '@ngular/screen';

@Injectable()
export class ApplayoutService {

  constructor(
    private screenObserver: ScreenObserver,
  ) {
    this.screenObserver.asObservable().pipe(
    ).subscribe((changes: ScreenObserved[]) => {
      console.log(changes);
      /**
       * 여기에서 'ScreenObserved[]'의 내용을 검토해 보세요.
       * 아래 링크에서 미디어쿼리-레인지-우선순위(MediaQuery Range Prioritization)에 대한 내용을 참고하여
       * 어떤 '브레이크포인트'들이 발생할지 확인할 수 있습니다.
       * https://github.com/angular/flex-layout/wiki/Responsive-API#breakpoint-activation-fallback-algorithm
       */
      
    });
  }
}
```
</details>

---
_Source: https://npm.io/package/@ngular/screen · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._