# ngx-media-query-watcher

> An angular directive to easy listen and handle media query changes.

Latest version **3.0.0** (published 2022-06-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-media-query-watcher
pnpm add ngx-media-query-watcher
yarn add ngx-media-query-watcher
bun add ngx-media-query-watcher
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2022-06-03 |
| First published | 2019-08-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 16 |
| Dependencies | 1 |
| Unpacked size | 30.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Bengt Weiße |
| Maintainers | killercodemonkey |
| Keywords | angular, directive, angular 2, angular, angular2, ng, ngx, media query, mediaquery, watcher |

## Links

- npm: https://www.npmjs.com/package/ngx-media-query-watcher
- Repository: https://github.com/KillerCodeMonkey/ngx-media-query-watcher
- Issues: https://github.com/KillerCodeMonkey/ngx-media-query-watcher/issues
- npm.io page: https://npm.io/package/ngx-media-query-watcher

## Dependencies (1)

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

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 3.0.0 (latest) — 2022-06-03
- 2.0.0 — 2020-08-31
- 1.0.1 — 2020-03-26
- 1.0.0 — 2020-02-15
- 0.1.0 — 2019-08-18

## README

# ngx-media-query-watcher [![Build Status](https://github.com/KillerCodeMonkey/ngx-media-query-watcher/workflows/CI/badge.svg)](https://github.com/KillerCodeMonkey/ngx-media-query-watcher/actions?query=branch%3Amaster)

An angular directive to easy listen and handle on media query changes.

## Donate/Support

If you like my work, feel free to support it. Donations to the project are always welcomed :)

<a href="https://www.buymeacoffee.com/bengtler" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

PayPal: [PayPal.Me/bengtler](http://paypal.me/bengtler)

## Installation

- `npm install ngx-media-query-watcher`
- install `@angular/core`, `@angular/platform-browser` and `rxjs` - they are peer dependencies

### For standard webpack, angular-cli and tsc builds

- import `MediaQueryWatcherModule` from `ngx-media-query-watcher`:

```TS
import { MediaQueryWatcherModule } from 'ngx-media-query-watcher'
```

- add `MediaQueryWatcherModule` to the imports of your NgModule:

```
@NgModule({
  imports: [
    ...,

    MediaQueryWatcherModule
  ],
  ...
})
class YourModule { ... }
```
- use `<div media-query-watcher query="(min-width: 992px)" (mediaMatchChanged)="handleChange($event)"></div>` in your templates to listen on a media query and handle a media query change.

### For SystemJS builds (Config)

- add ngx-media-query-watcher to your `paths`:
```
paths: {
  ...
  'ngx-media-query-watcher': 'node_modules/ngx-media-query-watcher/bundles/ngx-media-query-watcher.umd.js'
}
```
- set format and dependencies in `packages`:
```
packages: {
  'ngx-media-query-watcher': {
    format: 'cjs'
  }
}
```
- follow the steps of **For standard webpack and tsc builds**

## MediaQueryWatcher Directive

### Usage

- selector: `media-query-watcher` - add it as attribute to a html-tag
- property/input: `query` - pass a css media query here
- output: `mediaMatchChanged` - get notified when a media query is matching or not

### Example

```HTML
<div
  media-query-watcher
  query="(min-width: 992px)"
  (mediaMatchChanged)="handleChange($event)"
>
  <p>hello</p>
</div>
```

```TS
class MyComponent {
  handleChange(match: boolean) {
    // handle match
  }
}
```

---
_Source: https://npm.io/package/ngx-media-query-watcher · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._