Ng2ResponsiveTool

This package simplifies the creation of responsive Angular components in mobile first approach. Ng2ResponsiveTool exposes a set of observables that emit values depending on different screen sizes and on the browser's user agent.

Install

npm i ng2-responsive-tool --save

Usage

in app.module.ts

import { NgModule } from "@angular/core";
import { Ng2ResponsiveModule } from "ng2-responsive-tool";

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

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

in app.component.ts

import { Component } from "@angular/core";
<mark>import { ResponsiveToolService } from "ng2-responsive-tool";</mark>

@Component({
  selector: "app-root",
  template: `
  <code>size$: {{ responsiveService.size$ | async }}</code>
  <code>isExtraSmall$: {{ responsiveService.isExtraSmall$ | async }}</code>
  <code>isSmall$: {{ responsiveService.isSmall$ | async }}</code>
  <code>isMedium$: {{ responsiveService.isMedium$ | async }}</code>
  <code>isLarge$: {{ responsiveService.isLarge$ | async }}</code>
  <code>isExtraLarge$: {{ responsiveService.isExtraLarge$ | async }}</code>
  
  <!-- *ngIf -->
  <div *ngIf="responsiveService.isExtraSmall$ | async">visible only if screen is greater than 600px</div>
  
  <!-- style -->
  <div[class]="(responsiveService.isLarge$ | async) ? 'bg-red' : 'bg-green'"></div>
  `,
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  destroy$ = new Subject();
  
  constructor(public responsiveService: ResponsiveToolService) {
  
    responsiveService.size$.pipe(takeUntil(this.destroy$)).subscribe((size) => console.log(size));
  }
}

define custom breakpoint

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Ng2ResponsiveModule } from 'ng2-responsive-tool';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
   Ng2ResponsiveModule.forRoot({
      extraSmall: 150,
      small: 300,
      medium: 450,
      large: 650,
      extraLarge: 800
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

API

ResponsiveToolService

| Syntax | Type | Description | | ------------- | --------------------- |-------------| | size$ | Observable< number > | hot observable that emits the size of the screen every time that it changes | | isExtraSmall$ | Observable< boolean > | hot observable that emits true if the screen is bigger than the breakpoint, otherwise emits false | | isSmall$ | Observable< boolean > | hot observable that emits true if the screen is bigger than the breakpoint, otherwise emits false | | isMedium$ | Observable< boolean > | hot observable that emits true if the screen is bigger than the breakpoint, otherwise emits false | | isLarge$ | Observable< boolean > | hot observable that emits true if the screen is bigger than the breakpoint, otherwise emits false | | isExtraLarge$ | Observable< boolean > | hot observable that emits true if the screen is bigger than the breakpoint, otherwise emits false | | isMobile$ | Observable< boolean > | hot observable that emits true if the browser's User-Agent is mobile | | isDesktop$ | Observable< boolean > | hot observable that emits true if the browser's User-Agent is desktop |