## Observing the changes of screen (MediaQuery Based)
npm install @ngular/screenThis 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);
});
}
}
`
한국어 설명
이 패키지는 '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
*/
});
}
}
``