# AngularContainerMediaQuery

Container or Component media queries for Angular.

```ts
@Component({
  selector: 'app-parent',
  template: `<app-child></app-child>`,
})
class ParentComponent {}

@Component({selector: 'app-child'})
class ChildComponent implements AfterViewInit {
  // when the app-parent width is below 20rem the foo class is added
  @MediaQuery('app-parent:(max-width: 20rem)') @HostBinding('class.foo') foo = false;
  // you can also select any direct parent with the `$parent` selector (in this case `app-parent`)
  @MediaQuery('$parent:(max-width: 20rem)') @HostBinding('class.bar') bar = false;
  // when the app-child width is below 20rem the bas class is added
  @MediaQuery('(max-width: 20rem)') @HostBinding('class.bas') bas = false;

  constructor(
    private _resize: ObserveResizeService,
    private _elementRef: ElementRef,
    private _changeDetector: ChangeDetectorRef
  ) {}

  ngAfterViewInit(): void {
    this._resize.register(this, this._elementRef, this._changeDetector);
  }
}
```

In `app-parent:(max-width: 20rem)` the selector part `app-parent` is used to find the closest parent in the DOM tree, the size changes of that parent are observed and used to check the MediaQuery part `(max-width: 20rem)`.

supported media features:

- min-width
- max-width
- min-height
- max-height

the `and` operator is also supported e.g. `(min-width: 200px) and (max-width: 400px)`