Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

ngx-eq

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-eq

[![npm version](https://badge.fury.io/js/ngx-eq.svg)](https://badge.fury.io/js/ngx-eq)


Version published
Maintainers
1
Created

ngx-eq

npm version

NGX-EQ is an Angular Directive that makes it easier to allow components to be responsive to their parent element size. CSS Media Queries fall short when it comes to reusable components, as they measure screen size and not the size context of the element.

NGX-EQ uses the Resize Observer API to efficiently add special CSS class hooks to style your component based on the current size of the component.

Demo

Example

<my-component ngxEQ></my-component
:host {
  padding: 12px;
  margin-bottom: 12px;
  color: #fff;
  background-color: #4A4A4A;
  display: block;
}

:host.ngx-eq-xs {
  background-color: #A929AD;
}

:host.ngx-eq-sm {
  background-color: #FF353B;
}

:host.ngx-eq-md {
  background-color: #3F49E8;
}

:host.ngx-eq-lg {
  background-color: #48B04D;
}
  
:host.ngx-eq-xl {
  background-color: #E8BE0C;
}

Instalation

npm install ngx-eq --save

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxEqModule } from 'ngx-eq';

import { AppComponent } from './app.component';

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

Configuration

The Element Query breakpoints can be customized.

NgxEqModule.forRoot({
  // default values
  extraSmall: 280,
  small: 480,
  medium: 720,
  large: 960,
  extraLarge: 1440
})

You can override the breakpoints per a element. In this example the small breakpoint will now occur at 500px instead of the default 480px for only this particular element.

<my-component ngxEQ [small]="500"></my-component

FAQs

Package last updated on 29 Mar 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts