If-width NPM | npm.io

ifWidth Angular library

IfWidth is a angular directive to remove elements from the DOM at specified screen-size breakpoints. It works similar to CSS media-queries by specifying a minimum and maximum screen width for which an element should be shown. This library currently supports the directives

*ifWidth=0, 500
*ifHeight=0, 'max'

for width and height dependent DOM manipulation.

This project was generated with Angular CLI version 11.0.6.

Installation

Install with: npm install if-width

Example

At first, you have to import the module containing the directive:

import { IfWidthModule } from 'if-width';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    ...
    IfWidthModule,
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then you can simply specify the range in which the element should be visible.

<!-- This will only be visible if the window width is < 700 -->
<p *ifWidth="[0, 700]">Only Small Screen</p>

<!-- This will only be visible if the window width is >= 700 -->
<p *ifWidth="[700, 'max']">Only Big Screen</p>

<!-- Visible only for window width >= 0 && width < 400 and width >= 800 && width < 1000 >> -->
<p *ifWidth="[[0, 400], [800, 1000]]">Multiple ranges</p>

You can also use variable bindings:

// component.ts
private smallScreen = [0, 720];
// component.html
<p *ifWidth="smallScreen">Multiple ranges</p>

All examples are also valid with *ifHeight, if the element's rendering should be dependent on the window's height.

Parameters

Following types are allowed

An array with two elements for a given range x,y where x < y. The element will only be visible if element's width is bigger or equal x and smaller than y (e.g. 0, 720)
An array containing other 2-element arrays to define multiple ranges (e.g. [0, 720, 1000, 'max'])
A string containing the JSON of either type (e.g. "0, 720" or "[0, 720, 1000, 'max']")

An open end screen size can be specified by using the string value 'max' as the second element (e.g. 720, 'max')