0.0.7 • Published 6 years ago
ngx-eq v0.0.7
ngx-eq
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