kit-mq

README

MediaQuery module.

Module uses matchMedia browser API, more info: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

API

[class] KitMqModule

@NgModule

Exports:[ KitMqDirective, ]

[class] KitMqService

@Injectable

Provided in:'root'

Check or observe media query.

Usage

Provide breakpoints in the root module:

...
providers: [
  {
    provide: kitMqBreakpoints,
    useValue: {
      mobile: '320px',
      tablet: '740px',
      desktop: '980px',
      wide: '1300px',
    },
  },
],

Set of breakpoint is a fully customizable.

Use the service:

constructor(private mq: KitMqService) {
}
...
// Check
const matches = this.mq.check({from: 'mobile', until: 'tablet'});
...
// Observe
this.mq.observe({from: 'tablet'}).subscribe(matches => {
});

Members

SignatureDescription
check(params: KitMqParams)
checkRaw(mediaQuery: string): boolean | null
observe(params: KitMqParams): Observable<boolean | null>
observeRaw(mediaQuery: string): Observable<boolean | null>

[class] KitMqDirective

@Directive

Selector:'[kitMq]'

Structural directive to check/observe media query.

Works like *ngIf.

Usage

<div *kitMq="{from: 'desktop'}">
  Displays on desktops and wider.
</div>

Force render

When you pass a boolean it works like ngIf.

<div *kitMq="true">
  This block will be rendered
</div>

Server rendering

By default block will not be rendered on the server platform. You can change this behavior:

<div *kitMq="{from: 'desktop', server: true}">
  Displays on desktops and wider (and on server).
</div>

Members

SignatureDescription
@Input() kitMq: KitMqParams | boolean

[interface] KitMqParams

Members

SignatureDescription
type(): 'all' | 'print' | 'screen' | 'speech'
from(): string
until(): string
and(): string
server(): boolean