AngularContainerMediaQuery

Container or Component media queries for Angular.

@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)