ngx-eq

Ngx-EQ

Ngx-EQ is a 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 efficently add special CSS class hooks to style your component based on the current size of the component.

Example

<my-component ngxEQ></my-component

:host {
  padding: 12px;
  margin-bottom: 12px;
  color: #fff;
  background-color: #4A4A4A;
  display: block;

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

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

  &.ngx-eq-lg {
    background-color: #48B04D;
  }
  
  &.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 './modules/ngx-eq/ngx-eq.module';
import { AppComponent } from './app.component';

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